jquery - 动画切换和背景

Question

我尝试：
- 单击动画 div 徽标
- 再次单击 div 徽标，它应该转到初始位置
- 单击背景，它应该转到初始位置（如果还没有）

我设置了一个 var 来检查 div 的位置，但它不起作用，我不知道它是否是正确的方向。

这里是玩：http: //jsfiddle.net/xNMZ3/

HTML：

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

CSS：

body{margin:0;}

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

#background {
    position: absolute;
    width: 100%; height: 100%;
    background:yellow;
    z-index:0;
}

查询：

$(function(){
    var hidden = $("#logo").css("bottom","-40" + "px");
    $("#logo").click(function(event) {
    event.stopPropagation();

      if (hidden) {
        $("#logo").animate({bottom: "0"}, 500);
      } else {
        $("#logo").stop.animate({bottom: "-40"}, 500);
      }

    });

    $("#background").click(function() {
      if (!hidden) {
        $("#logo").animate({bottom: "-40"}, 500);
      }     
    });
}) 

Answer 1

尝试这个：

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

    $("#background").click(function () {
        if (!hidden) {
            $logo.animate({
                bottom: "-40"
            }, 500, function () {
                hidden = !hidden;
            });
        }
    });
});

小提琴演示