1

ページが読み込まれた直後に、タイトルにトランジション効果 (下から上へ) を作成しようとしていますが、なぜ機能しないのかわかりません。

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

デモ: フィドル

4

2 に答える 2

2

が機能するには.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-23T16:51:17.327 に答える
0

実際には何もトリガーしていません。イベント名または 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 );
于 2012-09-23T16:53:07.533 に答える