jquery - jQuery触发器不起作用

Question

我正在尝试在页面加载后立即在标题上创建过渡效果（从下到上），但我不知道为什么它不起作用。

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");
});

演示： 小提琴

Answer 1

为了.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"); 
});

Answer 2

你实际上并没有触发任何东西，你应该传递一个事件名称或一个 Event 对象：

.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 );