1

私は次のことを達成したいと考えています。

画像をクリックすると、一定量のピクセル (50 としましょう) を上方向に垂直方向にアニメーション化します。もう一度クリックすると、アニメーションが元の位置に戻ります。

これまでの私のコードは機能しません。

$("#content").click(function() {
$("#content").animate(
        {"left": "toggle"},
        "slow");
});

この場合、コンテンツは単なる div です。ボタンをクリックする簡単なチュートリアルを実行すると、div が左または右に移動しますが、div をボタンにすることも、上下に移動することもできません。

助けていただければ幸いです。

ありがとう。

4

3 に答える 3

2

次のことを試してください。

HTML

<a href="#" class="moveMe"><img src="..." /><span>Move Me</span>​&lt;/a>

CSS

.moveMe {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.moveMe img {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 250px;
}

.moveMe span {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #000;
}

<strong>JS

$(document).ready(function(){
    var toggled = false;
    $('.moveMe').bind('click', function(e){
        e.preventDefault();

        if (toggled){
            $('img', this).stop().animate({top: '0'}, 'slow');
            toggled = false;
        } else {
            $('img', this).stop().animate({top: '-50px'}, 'slow');
            toggled = true;
        }
    });
});​

JSFiddle ここに

必要に応じて CSSwidthを調整heightします。

これが役立つことを願っています！

于 2012-09-05T16:35:30.320 に答える
1

これを試して：

$(document).ready(function() {
    var up = false;
    $("#content").click(function() {
       var newTop = "+=50px";
       if (up) {
          newTop = "-=50px";
       }           
       $(this).animate({ top: newTop}, "slow");
       up = !up;
    });
});

編集：私$(document).ready()はあなたのために上に追加しました。また、このアニメーションを jsFiddle で表示したときに発生する「ストリーキング」は jsFiddle に限定されており、ページ上で定期的に発生するわけではありません。

幸運を！:)

于 2012-09-05T16:32:45.710 に答える
0

代わりにこれを試してください：

$(function(){
 var originalHeight = $("#content").height();
 $("#content").click(function() {
   var $this = $(this);
   $("#content").animate(
      {height: ($this.height()==originalHeight ? (originalHeight+50):originalHeight)},    
      "slow");
  });
});

デモ

これがお役に立てば幸いです。

于 2012-09-05T16:32:05.477 に答える