1

私は2つの異なる.animate関数を持っています。

  1. ドキュメントの要素を下にスライドして準備ができました。
  2. これらの同じ要素にマウスオーバー効果を追加します。

ここでの問題は、要素がドキュメントの準備ができている領域にマウスを置いた場合、要素がマウスがあった位置で停止することです。

もちろん、目標は、要素が中断することなく、要素自体をスライドさせることです。

http://photoshopmesta.net/sic/theTest/slide.html

別のこと..マウスリーブは、マウスオーバー前よりも要素をわずかに高い位置に移動するようです...

画像の読み込みに関するアイデアはありますか？ドキュメントに画像ファイルをロードするコードを入れました。可能な限り高速に画像をロードしますが、画像がロードされているかどうかに関係なく、要素がスライドすることは考えていませんでした。もちろん、スライドアクションの前に要素はロードされません。：/

編集：

@entropoのおかげで実際の例http://jsfiddle.net/PnHpk/7/しばらくすると画像が消えてしまう可能性があるので、画像の代わりに背景色を使用した例を示しますhttp://jsfiddle.net/PnHpk / 8 /

4

2 に答える 2

1

あなたの例をjsfiddleに入れました：http://jsfiddle.net/entropo/PnHpk/

これは、実際の例を示して回答するのに役立つため、ここで質問する際の良い習慣です。

これを機能させるための私の見解は次のとおりです。 http://jsfiddle.net/entropo/PnHpk/7/

jQuery 1.5 の新しい Deferred オブジェクトを利用しています。
参照: SO ' [jquery] deferred' 検索

また、これは私が行ったこととはまったく異なります (スタックpushを作成するために使用することを好みましたPromise) が、これは役に立ちます: Deferred promises and synchronizing jquery.animate()

于 2011-04-07T21:58:12.750 に答える
0

その理由は、マウスオーバーとマウスアウトに .stop があるためです。それらをそこに置くことは明らかに理にかなっているので、onload アニメーションが終了した後に mouseover および mouseout イベントを設定する必要があります。

また、画像の読み込みが完了するまで待ってアニメーションを再生する場合は、ドキュメントの .ready イベントではなく、画像の .load イベントを使用します。

編集: 要素は、最初は 10px のマージントップで始まるため、マウスオーバー後にわずかに上に移動しますが、アニメーションはマウスアウト時にそれを 0px に設定します

編集2:

そのイメージにプリローダーを使用する代わりに、次のようなものを使用します。

$(document).ready(function()
{
    var img = document.createElement('img');

    img.onload = function()
    {
        console.log("%o finished loading", this);
        //Set mouseover/mouseout event here
    };

    img.src = 'linkit.png';
});
于 2011-04-07T19:07:21.837 に答える