1

クリックしたいボタンがあります（私の場合、これは「.circle」です）。クリックすると、#data div がフェードインし、「margin-top:50px」でアニメーション化します。次に、ユーザーがトグル ボタンを 2 回クリックすると、「margin-top:0px」にアニメーション化されてからフェードアウトします。

ただし、私が遭遇した問題は、トグルを 3 回クリックすると、最初の機能が再度実行されることを期待することです。しかし、代わりに、最初の関数が再度実行される前に、奇妙なことを行い、50px のマージントップにリセットします。

これについて何か助けていただければ幸いです。これは、同じコードで作成した JSFiddle です。複数回クリックすると、問題が発生することがわかります。また、別の問題は、最初にクリックしたときに機能せず、2回目のクリックで機能することでした。

http://jsfiddle.net/sN8Tn/

以下のjqueryのビットも投稿します：

$(".button").click(function(){

        $(".button").toggle(

        function(){  
            $("#showme").fadeIn(500, 
            function(){
              $("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
            }
          );

        },

        function(){

          $("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
            function(){
              $("#showme").fadeOut(500);
            }
          );

        });

});​
4

1 に答える 1

4

関数を削除し.click()ます。クリックは.toggle()関数で暗示されます。jQuery .toggle() jsFiddle

$(".button").toggle(
function() {
    $("#showme").fadeIn(500, function() {
        $("#showme").animate({
            "margin-top": "50px"
        }, 500, 'linear');
    });
}, function() {
    $("#showme").animate({
        "margin-top": "0px"
    }, 500, 'linear', function() {
        $("#showme").fadeOut(500);
    });
});​
于 2012-11-02T02:15:01.700 に答える