0

私はしようとします：
- クリックしてdivロゴをアニメーション化します -
divロゴをもう一度クリックすると、最初の位置に移動する
必要があります - 背景をクリックすると、最初の位置に移動する必要があります（まだ開始されていない場合）

div の位置を確認する var を設定しましたが、動作せず、正しい方向かどうかもわかりません。

ここでプレイします：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;
}

Jクエリ:

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

1 に答える 1

0

これを試して：

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

フィドルのデモ

于 2013-05-14T17:18:10.190 に答える