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触发器不工作

回答

相关问题