1

私はjquery（または実際にはjavaスクリプト）の経験はありませんがimg id=mike、ページが読み込まれたときに画像（...）をスライドさせようとしています。

jqueryのドキュメントを調べてGoogleクエリを試した後、これまでにこれを思いついた

  $(document).ready(function() {

$("#mike").load(function () {
      $(this).show("slide", { direction: "up" }, 2000);

});

  });

そして、CSSdisplay:hiddenを適用して、ページの読み込み時にスライドインするまで非表示のままにします。

ただし、ページをリロードしない限り、これは機能しないようです。

誰かがこれで私を助けてくれることを願っています:)

4

2 に答える 2

2

.load()ブラウザによっては、画像がキャッシュから取得された場合はトリガーされないため、画像が次の場合は手動でイベントを発生させる必要がありますcomplete。

$(function() {
  $("#mike").one('load', function () {
    $(this).show("slide", { direction: "up" }, 2000);
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

は.one()、イベントが1回だけ発生することを保証します。各要素（この.each()場合は1つのみ）をループし、すでにcomplete（キャッシュからフェッチされた場合は）イベントを発生させて、イベントが確実に発生するようにします（すでに発生している場合は.one()、2回スライドしないように処理します）。 ）。

于 2010-04-20T11:17:33.473 に答える
0

@Dean、CSS と jQuery の組み合わせを使用して仕事をするのがおそらく最善でしょう。これは、画像のキャッシュの問題を回避するためです (説明については、Nick の応答を参照してください)。大まかな例を次に示します。

CSS:

#mike {
    display: block;
    margin: 0; padding: 0; /* Ignore this if you're using a reset.css */

    position: absolute;    /* Change this to relative based on the containing elements */
    top: 2000px;           /* Assumes you have an image that's 100px tall as an example */
}

jQuery:

jQuery( function(){
    $('#mike').animate({'top':'0'},255,'linear', function(){
        console.log('Done Animation);
    });
} );

ページの読み込み後、アニメーションを数秒 (またはミリ秒) 遅らせることもできます。

jQuery( function(){
    // Delay the animation by 1 second after page load before animating.
    $('#mike').delay(1000).animate({'top':'0'},255,'linear', function(){
        console.log('Done Animation);
    });
} );
于 2012-10-17T00:52:39.503 に答える