Question

我正在使用jQuery-ui; 如何“切换”'保证金'？首先我有'-160px'然后我把'33px' 我想在每次点击时交替使用'.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 () {
           }
         });
 });

谢谢！

Answer 1

或者您可以使用.toggle() http://api.jquery.com/toggle-event/

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

Answer 2

简单，使用toggleClass并将样式保存在CSS所属的位置。

它还允许您使用选择器来确定应该运行哪个动画：

$('.LoginButton.foo').animate();
$('.LoginButton:not(.foo)').animate();

Answer 3

快速又脏，这个会工作，虽然我怀疑这是最佳做法。

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 () {
               }
             });
 });

编辑：我喜欢zzzzBov的建议，但我认为toggleClass（）不支持高级动画，例如specialEasing或completion回调。

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

Answer 4

你可以检查边距是33px还是-160px，当33，淡入-160，当-160淡入33时

jQuery，我该如何切换边距

4 个答案: