Question

一直在学习Jquery并尝试编写一些代码，当你点击一个按钮时会动画制作动画，而当你再次点击它时则相反（每次单击按钮时，从右向左移动一个圆圈。相当简单的动画，只是努力让它在Jquery中使用if / else语句来实现它）

目前我在：

的

的
$(document).on('click', '#sub', function(){ var moved = 0; if (moved == 0) { $('.circle').animate({'margin-left': "300px"}); moved = 1; } else{ moved = 0; $('.circle').animate({'margin-left': "-300px"}); } });

的

所以我试图将.circle移动到300px，它运行if语句部分正常，当我更改为移动到值1时，没有任何反应。我是否应该使用while循环或者我应该做些什么？

Answer 1

根据您需要支持的浏览器，将动画交给css可能更好。单击圆圈并使用css过渡时，可以简单地切换班级。

这样的事情： JS

$('.circle').on('click', function() {
  $(this).toggleClass('clicked');
}

CSS

.circle { transition: margin-left 0.2s; margin-left: -300px; }
.circle.clicked { margin-left: 3OOpx; }

Answer 2

每次在if语句之前设置move = 0

$(document).on('click', '#sub', function(){
  var moved = 0;  // <- This line here!
  if (moved == 0) {
     $('.circle').animate({'margin-left': "300px"});
     moved = 1;
  }
  else{
      moved = 0;
      $('.circle').animate({'margin-left': "-300px"});
  }
});

您需要将声明移到功能之外，以便每次都不会重置声明。

Answer 3

您应该更全面地声明您的moved var。现在，当点击事件被触发时，moved始终为0，因为它设置了这种方式。

(function() {
    var moved = 0;

    $(document).on('click', '#sub', function(){
        if (moved == 0) {
           $('.circle').animate({'margin-left': "300px"});
           moved = 1;
        }
        else{
            moved = 0;
            $('.circle').animate({'margin-left': "-300px"});
        }
    });   
})();

现在它将＆＃34;保存＆＃34;单击事件范围之外的moved变量的状态。

编辑，一个额外的更短版本的代码：

(function() {
    var moved = 0;
    $(document).on('click', '#sub', function(){
        $('.circle').animate({
            'margin-left': (moved ? "-300" : 300 ) + "px"
        }, 500, 'swing', function() {
            moved = !moved;
            // or 
            moved = (moved ? 0 : 1);
        });
    });   
})();

Answer 4

尝试这样的事情。首次单击时向该元素添加类，并在第二次单击时将其删除。

$(document).on('click', '#sub', function(){

if($('.circle').hasClass("clicked")){
   $('.circle').animate({'margin-left': "300px"});
   $('.circle').removeClass("clicked");
}else{
  $('.circle').animate({'margin-left': "-300px"});
  $('.circle').addClass("clicked");
}

});

Jquery IF ELSE动画

4 个答案: