1

で反転アニメーションを作成する方法は.animate? この機能について他の場所で読みましたが、.toggle使用すると、この機能は「クリック」なしで自動的に開始されます。I want it (関数) は、私 (またはユーザー) がクリックしたときにのみ開始されます。

$(document).ready(function(){
    $("#dae").toggle(
        function(){
            $("#dae").click(function(){
                $("#dae").animate({left:'50px', top:'100px'}, "slow");
                $("#dae").animate({opacity:0.1}, "slow");
                $("#dae").animate({opacity:1.0}, "slow");
            });
        }, function(){
            $("#dae").click(function(){
                $("#dae").animate({opacity:1.0}, "slow");
                $("#dae").animate({opacity:0.1}, "slow");
                $("#dae").animate({left:'10px', top:'20px'}, "slow");
            });
        }
    )
});

問題は、ブラウザが起動すると がdiv消えることです。

4

2 に答える 2

4

トグルに「クリック」イベントは必要ありません。.toggle() はクリック イベントに基づいています。

したがって、次のように設定します。

$("#dae").toggle(
    function(){

            $(this).animate({left:'50px', top:'100px'}, "slow");
            $(this).animate({opacity:0.1}, "slow");
            $(this).animate({opacity:1.0}, "slow");

    }, function(){

            $(this).animate({opacity:1.0}, "slow");
            $(this).animate({opacity:0.1}, "slow");
            $(this).animate({left:'10px', top:'20px'}, "slow");

    }
)

上記を試して、それがどのように機能するかを確認してください。何か問題があれば教えてください。

編集：以下に投稿されているように、これは新しいバージョンでは機能しないことに注意してください。両方の機能をサポートしなくなったため、jquery の。良いと有効なポイント。

于 2013-05-20T01:23:40.897 に答える
2

これを試して：-

どのバージョンの jquery を使用しているかはわかりませんが、.toggle()は 2 つのコールバックを使用しなくなりました。また、トグルを実行するのではなく、クリックで実行する必要があるため、最初に実行されるのがわかります。

デモ

$("#dae").click(function(){
    var $this = $(this);
    if ($this.is('.animate')) //Just add this class to detect the state.
    {
       
            $this.animate({left:'50px', top:'100px'}, "slow")
             .animate({opacity:0.1}, "slow")
             .animate({opacity:1.0}, "slow");
     }
    else
    {
         $this.animate({opacity:1.0}, "slow")
         .animate({opacity:0.1}, "slow")
         .animate({left:'10px', top:'20px'}, "slow");
    }
   $this.toggleClass('animate'); //add/remove class based on its previous state.
});
于 2013-05-20T01:42:11.613 に答える