移动 div onclick 并返回 onclick

Question

我有一个 jQuery 代码，可以在我单击它时向右移动某个 div 元素，我想在我再次单击它时将其移回原来的位置。

$(document).ready(function() {
    $("#wel1").click(function() {
        $("#sidemenu").animate({left: "80px"});
    });
});

举个简单的例子，如何实现？

Answer 1

实现它的一种可能方法是将状态存储在变量中并在单击时检查其状态。

$(document).ready(function() {
   var sideMenu = false;
    $("#wel1").click(function() {
      if (!sideMenu) {
        $("#sidemenu").animate({left: "80px"});
        sideMenu = true;
      }
      else {
        $("#sidemenu").animate({left: "0px"});
        sideMenu = false;     
      }
    });
});

请注意，此解决方案存在几个问题：

不适用于多个菜单
如果快速单击可能会产生不需要的动画效果("jumping")

Answer 2

你可以这样做：

var 切换 = 1;

$(document).ready(function() {
    $("#wel1").click(function() {
    if (toggle == 1){
        $("#sidemenu").animate({left: "80px"});
toggle = 0;
    } else{
$("#sidemenu").animate({right: "80px"});
toggle = 1;
    }
    });
});

你有一个值为1的变量'toggle'，当你点击它会检查'toggle'是否等于1，如果是它会向左移动，然后设置'toggle' 到 0，因此，如果您第二次单击，第一个 if 将返回 false，它将使用 if 语句并将对象向右移动，之后它将设置 'toggle' 的值到 1，这将导致您想要的行为。

Answer 3

您需要一个状态来检查它是否被点击，如下所示：

$("#wel1").click(function() {
    if($(this).hasClass("clicked")){
        $(this).removeClass("clicked");
        $("#sidemenu").animate({left: "80px"});
    }else{
        $(this).addClass("clicked");
        $("#sidemenu").animate({left: "0px"});
    }
});

看看我的fiddle..

Answer 4

您可以通过添加一个属性来存储 div 的当前状态来简化此操作。实施时间：http://jsfiddle.net/mwtrsw9p/

$('#movable').click(function(){
if($(this).attr("trigger")==="0"){
    $(this).animate({"left":"100px"},700);
    $(this).attr("trigger","1");
}
else{
    $(this).animate({"left":"0px"},700);
    $(this).attr("trigger","0");
}
});

HTML:

<div id = "movable" trigger = "0"></div>

CSS :

#movable{
position:relative;
height:50px;
width:50px;
background-color:red;
}

Answer 5

我觉得这样最好：

css:

.animated_right{
    left:80px;
}

js:

$(document).ready(function() {
    $("#wel1").on("click", function() {
        $("#sidemenu").toggleClass("animated_right", 1000); // 1sec
    });
});

移动 div onclick 并返回 onclick

Move div onclick and back onclick

html

jquery

move

click