Question

我试着：
- 单击以设置div徽标的动画
- 再次单击div徽标，它应该转到初始位置
- 点击后台，它应该转到初始位置（如果还没有）

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

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

JQUERY：

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

FIDDLE DEMO

动画切换和背景

1 个答案: