垂直 jquery 动画答案

【问题标题】：Vertical jquery animate垂直 jquery 动画
【发布时间】：2012-08-30 10:14:11
【问题描述】：

我希望实现以下目标：

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

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

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

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

帮助感谢，

谢谢。

【问题讨论】：

标签： jquery jquery-animate toggle

【解决方案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;
}

$(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。

我希望这会有所帮助！

【讨论】：

【解决方案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，在页面上不会经常出现。

祝你好运！ :)

【讨论】：

如果不清楚，我的变量up 表示该元素是否已经被向上移动。很抱歉有任何困惑
和之前的回复类似。什么都没有发生。
如果你刚刚添加了，那么没有。在一定程度上起作用。无论#content 在屏幕上的哪个位置，它都会跳转到页面顶部。
它不应该跳到页面顶部...它应该只相对于当前位置滑动 50px。如果是的话，那真的很有趣 - 你能发布一个演示（或通过电子邮件发送给我：contact@zacharykniebel.com）吗？
这里是我给你的演示（我唯一改变的是 up 变量为 goUp 和反映变化的 if 语句 - 只是为了清楚起见）： jsfiddle.net/qFsaF/8 但我没有看到跳跃

【解决方案3】：

试试这个：

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

DEMO

希望这会有所帮助。

【讨论】：

很遗憾，它什么也没做。
@JamesMclaren，这个 evnet 必须写在 document.ready 中。我已经通过现场演示更新了我的答案。
是的，我已经添加了 onload。然而，它只是改变了高度。我将高度更改为顶部，因此它移动了 div 而没有更改高度。但是，与其他答案类似，它会将 div 移动到页面顶部，这不是我想要的。
@JamesMclaren，您是否需要显示某种菜单，将其动画化并显示内容，点击后将变为原始位置，即（隐藏该内容）
jsfiddle.net/ArY36/1 div 在 jsfiddle 中的位置很奇怪，在我的网页上，它位于屏幕下方。