1

ホバーするとタグが表示されるようにslideTogglesするdivが<p>あり、次にsetIntervalをアクティブにして表示<p>タグをアニメーション化します。ユーザーがdivにホバーしなくなると、タグは本来の<p>ように非表示になりますが、アニメーションは引き続き実行されます. ユーザーがホバーしなくなったときにアニメーションを停止するために考えられることはすべて試しましたが、jQuery は初めてで、うまくいきませんでした。

ここに私が持っているものを示すフィドルがありますhttp://jsfiddle.net/Yokocapolo/g7AyV/

<p>タグがホバーされなくなったときにタグを最初に戻し、ユーザーがdivに戻ったときにアニメーションを再開したいと思います。

助けてくれてありがとう。

4

3 に答える 3

1

このイベントをスクリプトの最後に追加します。

$('#portRibbon').mouseout(function(){
    $('#text3').animate({duration:0});
});

この例を確認してください: http://jsfiddle.net/saidbacr/g7AyV/1/

Jquery APIから:

その他の注意事項：

.animate() を含むすべての jQuery 効果は、jQuery.fx.off = true を設定することでグローバルにオフにすることができます。これにより、持続時間が実質的に 0 に設定されます。詳細については、jQuery.fx.off を参照してください。

于 2012-11-26T22:20:23.900 に答える
0

アニメーションを実行するために、ゼロに設定された間隔を使用していますか?

アニメーションは毎秒何千回も実行され、ブラウザが台無しになります。間隔関数はまったく必要ありませんが、おそらく次のようになるはずです。

var timer;

$('#portRibbon').on({
    mouseenter: function() {
        $('#text3').stop(true,true).css('top', '0px');
        $('#portDescription').slideDown(500, function() {
            $('#text3').animate({
                'top': '-35px'
            }, 6000).delay(1000).animate({
                'top': '0px'
            });
        });
    },
    mouseleave: function() {
        $('#portDescription').slideUp(500);
    }
});

<a href="http://jsfiddle.net/g7AyV/2/" rel="nofollow">フィドル

于 2012-11-26T22:11:33.690 に答える
0

spanon hover を追加してから on を削除することで、なんとか動作させることができましたmouseleave。

spanとテキストノードを変数として保存し、それをタグappend()に追加しました。pユーザーが離れたときremove()、変数 on を削除していましたmouseleave。

それが機能していることを確認するには、フィドルをクリックしてください。http://jsfiddle.net/Yokocapolo/g7AyV/7/

私の質問に答えてくれた人たちにもう一度感謝します。

于 2012-11-28T23:25:27.707 に答える