Question

我希望能够实现以下目标：

要点击的图像，它会向上垂直设置一定数量的像素（比如50）。我想再次点击它，然后它将动画回到原来的位置。

到目前为止，我的代码无效。

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

在这种情况下，内容只是一个div。我可以轻松地点击按钮教程，它会向左或向右移动div，但是我不能将div设为按钮，也不能让它上下移动。

帮助表示赞赏，

感谢。

Answer 1

尝试以下方法：

<强> HTML

<a href="#" class="moveMe"><img src="..." /><span>Move Me</span></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;
}

<强> 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 Here

根据需要调整CSS width和height。

我希望这有帮助！

Answer 2

试试这个：

$(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，并且不会在页面上定期发生。

祝你好运！：）

Answer 3

请改为尝试：

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

<强> DEMO

希望这会有所帮助。

垂直jquery动画

3 个答案: