Question

I have a button that I want to click (in my case this is ‘.circle’). When I click it, I want the #data div to fade in then animate with a ‘margin-top:50px’. Then when the user clicks the toggle button the second time it animates to ‘margin-top:0px’ then fades out.

However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.

I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i’m having after clicking it multiple times. Also another problem was when you click it for the first time it doesn’t work, but works on the second click.

http://jsfiddle.net/sN8Tn/

Ill also post the bit of jquery below:

$(".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);
            }
          );

        });

});​

Answer 1

Remove the .click() function. The click is implied with the .toggle() function. 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);
    });
});​