Question

按照注册jQuery中的示例，单击，第一次和第二次单击。我通过基本上添加了折旧的.toggle函数来解决我的问题。

$( "#go" ).click(function() {
var clicks = $(this).data('clicks');
if (clicks) {//on odd clicks this will run
    $( "#wrapper" ).animate({
        paddingLeft: "170px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "170px",
        fontSize: "14px",

        }, 500 );
}
else{//on even clicks this will run
    $( "#wrapper" ).animate({
        paddingLeft: "38px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "45px",
        fontSize: "18px",
        left: "215px",
        paddingLeft:"2px"
        }, 500 );

}
$(this).data("clicks", !clicks);
});

旧代码

    $( "#go" ).click(function() {
    $( "#wrapper" ).animate({
        paddingLeft: "38px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "45px",
        fontSize: "18px",
        left: "215px",
        paddingLeft:"2px"
        }, 500 );
    });

我需要上面的代码才能在#go上再次单击反向运行。我一直在使用.toggle，jQuery UI选项和stackoverflow帖子运行，但我似乎无法弄明白。

Answer 1

在两个函数中拆分动画和反向，并使用一个类来检查是否必须启动动画或另一个，如下所示：

Sample Fiddle

$( "#go" ).click(function() {
  if (!$(this).hasClass('isAnimated')) {
   $(this).addClass('isAnimated');
   anim1();
  } else {
   $(this).remove('isAnimated');
   anim2();
  }
});


function anim1 (){
....
}

function anim2 (){
....
}

Answer 2

按照Registering jQuery click, first and second click上的示例进行操作。我通过基本上添加了折旧的.toggle函数来解决我的问题。

$( "#go" ).click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {//on odd clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "170px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "170px",
            fontSize: "14px",

            }, 500 );
    }
    else{//on even clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "38px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "45px",
            fontSize: "18px",
            left: "215px",
            paddingLeft:"2px"
            }, 500 );

    }
    $(this).data("clicks", !clicks);
    });

在第二次单击jquery上运行.animate的反向

2 个答案: