垂直jquery动画

时间:2012-09-05 16:20:10

标签: jquery jquery-animate toggle

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

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

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

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

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

帮助表示赞赏,

感谢。

3 个答案:

答案 0 :(得分:2)

尝试以下方法:

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

我希望这有帮助!

答案 1 :(得分: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,并且不会在页面上定期发生。

祝你好运! :)

答案 2 :(得分:0)

请改为尝试:

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

<强> DEMO

希望这会有所帮助。

相关问题