0

クリックすると 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; 
}

Jクエリ:

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

})
4

3 に答える 3

3

これを試して:

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

フィドルのデモ

于 2013-05-14T11:16:20.930 に答える
1

これを試して:

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フィドルリンク

于 2013-05-14T11:25:01.513 に答える
1

あなたの例は機能していますが、変数の変更stateを少し間違えました。hidden

var hidden = true;
$("#logo").click(function() {
  if (hidden) {
    $("#logo").animate({bottom: "0"}, 1200);
  } else {
    $("#logo").animate({bottom: "-40"}, 1200);
  }
  hidden = !hidden;
});
于 2013-05-14T11:21:53.210 に答える