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

演示： Fiddle

Answer 1

要使.trigger()起作用，您需要将其传递给事件类型。然后，这将执行为给定事件类型附加的所有处理程序。例如：

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

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

<强> DEMO

如果您只想在页面加载时添加类move，则根本不需要使用trigger，只需添加类：

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

Answer 2

你实际上没有触发任何东西，你应该通过either an event name or an Event object：

.trigger( eventType [, extraParameters] )

e.g。

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

jQuery触发器无法正常工作

2 个答案: