jQuery觸發器不工作

我試圖在頁面加載後立即在標題上創建一個過渡效果（從底部到頂部），但我無法弄清楚爲什麼它不工作。jQuery觸發器不工作

HTML：

<div class="portfolio-title-wrap animate"> 
    <div class="portfolio-title">Rooftop Garden </div> 
    <div class="location">San Francisco, CA</div> 
</div>

CSS：

.animate { 
background-color: #c00; 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
-ms-transition: all 1s ease; 
transition: all 1s ease; 
position: absolute; 
top: 100%; 
right: 0; 
} 

.animate.move { 
top: 0%; 
margin-top: -700px; 
} 

.portfolio-title { 
color: #F8941F; 
font-weight:bold; 
}

的jQuery：

jQuery('.animate').trigger(
function() { 
$(this).addClass("move"); 
});

演示：Fiddle

來源

2012-09-23 George Grigorita

在您的小提琴中，從左側的下拉列表中選擇jQuery。而且，除了別的之外，你期望這個代碼做什麼，它沒有做什麼？順便提一句，['trigger（）']（http://api.jquery.com/trigger/）觸發*事件*，你需要的是使用['addClass（）']（http：//api.jquery .com/animate /）直接。 –

要使.trigger()正常工作，您需要將它傳遞給一個事件類型。然後這將執行爲給定事件類型附加的所有處理程序。例如：

$('.animate').bind('move-event', function() { // handler will fire when 'move-event' is triggered 
    $(this).addClass("move");   
}); 

$('.animate').trigger('move-event');

。

如果你只是想添加在頁面加載的類move，沒有必要使用trigger所有，只是添加類：

$(document).ready(function() { 
    $(".animate").addClass("move"); 
});

來源

2012-09-23 16:51:17

感謝您對觸發功能和答案的解釋！我的確在嘗試在頁面加載後將'move'類添加到'animate'中，但是我認爲這一切都是錯誤的。 –

您實際上並不觸發任何東西，你應該通過either an event name or an Event object ：

.trigger(eventType [, extraParameters])

// Create a new jQuery.Event object with specified event properties. 
    var e = jQuery.Event("keydown", { keyCode: 64 }); 

    // trigger an artificial keydown event with keyCode 64 
    jQuery("body").trigger(e);

來源

2012-09-23 16:53:07 mamoo

jQuery觸發器不工作

回答

相關問題