0

私はJQueryの使用にかなり慣れていないので、遊んでいました。ボタンのクリックで要素をフェードインさせようとしています。要素がまだフェードインしている間にユーザーがボタンをもう一度クリックすると、再び非表示/非表示を開始したいと思います。そのため、最初にすべてのアニメーションstop(true)を停止してから、要素を非表示にしてフェードインさせます。

私はそれを機能させることはできません。2 番目のフェードインは、要素がその時点で持っている不透明度から始まり、そこからフェードインするようです。私もcss("opacity", 0)代わりに使用しようとしましhide()たが、要素の不透明度が0に設定され、fadeInが機能しなくなったようです。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"> </script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    $("span").stop(true).hide().fadeIn(3000);
                });
            })
        </script>
        <button>FadeIn</button> <span>Hello, world!</span>
    </body>
</html>

JQuery 1.7.2 を使用し、Chrome と IE で試しました。

私は何を間違っていますか？

4

4 に答える 4

3

.stop(true)アニメーションを停止し、元の場所に残します。の途中にいたfade()場合、オブジェクトはフェードの途中で不透明度の値が残ります。

アニメーションを停止して不透明度を既知の状態にしたい場合は、開始したい値に設定するだけでよいでしょう。 .hide()セットdisplay: none- 不透明度を台無しにしません。

そのため、 を実行したときに途中だったfadeOut()場合は、.stop(true)実行するだけ.stop(true, true)で現在のアニメーションが最後にジャンプし、開始するのに適した場所が得られますfadeIn()。

アニメーションをその場所で停止し、そこから完全な不透明度までフェードすることもできます。

.stop(true).fadeTo(3000, 1);

これは、前のアニメーションを中断するときにやりたいことです。

于 2012-04-22T19:32:44.323 に答える
2

trueに 1 秒を渡し"jump to the end"ます。

.stop(true,true)

http://jsfiddle.net/V8wRE/2/

于 2012-04-22T19:23:25.897 に答える
0

問題は、スパンを停止してアニメーションが完了していない場合、fadeIn関数がスパンを最後の既知の不透明度 (アニメーションが完了していないため 1 ではない) にフェードするため、2 番目の true フラグをに渡すことができることです。 Esailjaが言ったように関数、または代わりにstop使用できます：fadeTofadeIn

 $("span").stop(true).hide().fadeTo(3000,1);

ここでの動作デモ: http://jsfiddle.net/V8wRE/3/

于 2012-04-22T19:28:45.527 に答える
0

私は今日この問題を抱えていましたが、fadeToではなくfadeInでした。このコードを使用しました

$(news_controls).hover(function(){
        $(this).stop().fadeTo("fast", 1);
},function(){
        $(this).stop().fadeTo("slow", 0.4);
});

ただし、あなたのケースで言われているように、最後にジャンプするには2つの真のフラグが必要なので、コードは次のようになります

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"> </script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    $("span").stop(true, true).hide().fadeIn(3000);
                });
            })
        </script>
        <button>FadeIn</button> <span>Hello, world!</span>
    </body>
</html>
于 2012-04-22T19:45:48.757 に答える