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

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

不适用于多个菜单
，
会产生不需要的动画效果（＆＃34;跳跃＆＃34;）

Answer 2

您可以通过添加属性来存储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 3

我认为这种方式最好：

的CSS：

.animated_right{
    left:80px;
}

JS：

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

Answer 4

你可以这样做：

var toggle = 1;

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

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

Answer 5

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

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

查看我的fiddle ..

移动div onclick并返回onclick

5 个答案: