Question

I’m using jQuery-ui;
how can I do a ‘toggle’ of a ‘margin’
first I have ‘-160px’ and then I put ’33px ‘
I want to alternate with each click to ‘.LoginButton’

CSS

.MyBox {
            font-family:Arial;
            color:#FFF;
            width: 400px;
            height: 150px;
            margin-top:-160px;
}

jQuery

 $('.LoginButton').click(function () {
      $('.MyBox').animate({
           marginTop: '33px'
           }, {
           duration: 2000,
           specialEasing: {
           marginTop: 'easeOutBounce'
           },
           complete: function () {
           }
         });
 });

thanks!!

Answer 1

Quick and dirty, this would work, although I doubt this is best practice.

var positiveMargin = false;
$('.LoginButton').click(function () {

    if (!positiveMargin) {
        var marginTop = "33px";
        positiveMargin = true;
    }
    else {
        var marginTop = "-160px";
        positiveMargin = false;
    }
     $('.MyBox').animate({
               marginTop: marginTop
               }, {
               duration: 2000,
               specialEasing: {
               marginTop: 'easeOutBounce'
               },
               complete: function () {
               }
             });
 });

Edit: I like zzzzBov’s suggestion, but I don’t think toggleClass() supports advanced animation such as specialEasing or a completion callback.

http://jqueryui.com/demos/toggleClass/