Триггер 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


jquery eventtrigger
person George Grigorita    schedule 23.09.2012    source источник
comment
В Fiddle выберите jQuery из раскрывающегося списка слева. И помимо всего прочего, что вы ожидали от этого кода, чего он не делает? Между прочим, trigger() запускает событие, вам нужно использовать < a href="http://api.jquery.com/animate/" rel="nofollow noreferrer">addClass() напрямую.   -  person David says reinstate Monica    schedule 23.09.2012

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы .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"); 
});
person João Silva    schedule 23.09.2012
comment
Спасибо за пояснения по поводу функции триггера и за ответ! Я действительно просто пытался добавить класс move в animate после загрузки страницы, но я смотрел на все это неправильно. - person George Grigorita; 23.09.2012

arrow_upward
0
arrow_downward

На самом деле вы ничего не запускаете, вы должны передать либо имя события, либо объект Event< /а>:

.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 );
person mamoo    schedule 23.09.2012