jquery - 动画点击切换

Question

单击时我为 div 设置动画（在示例中单击切换）。我想在再次单击时动画到初始位置。（我尝试使用变量和if，它不起作用。也许还有另一种更简单的方法？或者有什么错误？）

请在此处查看您的答案：http: //jsfiddle.net/uXVxH/2/

HTML：

<div id="logo"></div>

CSS：

#logo {
    position:fixed;
    bottom:-40px;left: 5%;
    width:70px; height:80px;
    background:blue;
    cursor:pointer; 
}

查询：

$(function(){
    /* CLICK simple
    $("#logo").click(function() {
        $("#logo").animate({bottom: "0"}, 1200) 
    });
    */

    /*click toggle ?*/
    var hidden = true;
    $("#logo").click(function() {
      if (hidden) {
        $("#logo").animate({bottom: "0"}, 1200);
      } else {
        $("#logo").animate({bottom: "-40"}, 1200);
      }
      state = !hidden;
    });

})

Answer 1

尝试这个：

var hidden = true;
$("#logo").click(function () {
    var bottom = hidden ? "0" : "-40";
    $(this).stop().animate({bottom: bottom}, 1200);
    hidden = !hidden;
});

小提琴演示

Answer 2

尝试这个：

css

#logo {
    position:fixed;
    bottom:-40px;left: 5%;
    width:70px; height:80px;
    background:blue;
    cursor:pointer;
    transition: all 0.5s;
}

.long {
    bottom: 0 !important;
    transition: all 0.5s;
}

js

$(function(){
    $("#logo").click(function() {
        $(this).toggleClass('long');
    });
});

JS小提琴链接

Answer 3

您的示例正在运行，但是您state对hidden变量进行了一些错误更改。

var hidden = true;
$("#logo").click(function() {
  if (hidden) {
    $("#logo").animate({bottom: "0"}, 1200);
  } else {
    $("#logo").animate({bottom: "-40"}, 1200);
  }
  hidden = !hidden;
});