垂直jquery动画

我希望实现以下目标：

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

到目前为止，我的代码不起作用

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

在这种情况下，内容只是一个div。我可以做点击按钮的简单教程，它会向左或向右移动div，但我不能使div成为按钮，也不能使其向上或向下移动

感谢您的帮助

谢谢。

试试这个：

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

希望这会有所帮助。

试试这个：

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

祝你好运！：）

尝试以下操作：

HTML

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

​JS

.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;
}

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

根据需要调整CSS的宽度和高度

---

我希望这有帮助

不幸的是，它什么也没做。@jamesmlaren，这个evnet必须用document.ready编写。我已经用现场演示更新了我的答案。是的，我添加了onload。然而，它只是改变了高度。我将“高度”更改为“顶部”，因此它移动了div，而没有更改高度。但是，与其他答案类似，它会将div移动到页面顶部，这不是我想要的。@JamesMclaren，您是否需要显示某种菜单，使其向下移动并显示内容，单击后将变为原始位置，即（隐藏该内容）div在JSFIDLE中的位置奇怪，在我的网页上，它位于屏幕的下方。如果不清楚，我的变量

up

会指示元素是否已上移。很抱歉，与之前的回复类似。什么都没发生。如果你只是加上那个，那么不。在一定程度上起作用。无论屏幕上的内容在哪里，它都会跳到页面顶部。它不应该跳到页面顶部…它应该只相对于当前位置滑动50像素。如果是的话，那真的很有趣-你能发布一个演示吗（或者发电子邮件给我：contact@zacharykniebel.com)？这里是我给你的演示（我唯一更改的是

up

变量变为

goUp

，以及反映更改的if语句-所有这些都只是为了清晰起见）：但我没有看到跳跃