垂直jquery动画

我想要实现以下内容：垂直jquery动画

要点击的图像，它将垂直地向上生成一定数量的像素（可以说50）。然后，我想再次点击它，然后它会回到原来的位置。

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

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

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

帮助赞赏，

谢谢。

来源

2012-09-05 James Mclaren

试试这个：

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

DEMO

希望这会有所帮助。

来源

2012-09-05 16:32:05

不幸的是，它没有做任何事情。 –

@JamesMclaren，这个evnet必须写在document.ready中。我已经用现场演示更新了我的答案。 –

是的，我已经加入了onload。但是，它只改变了高度。我改变了高度，所以它移动了div而不是改变高度。但是，类似于其他答案，它会将div移到页面的顶部，这不是我想要的。 –

试试这个：

$(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-05 16:32:45

如果不清楚，我的变量'up'表示元素是否已经被移动了。对不起，任何混淆 –

类似于之前的回应。什么都没发生。您是否记得添加document.ready？ –

？ –

尝试以下操作：

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和widthheight。

我希望这有助于！

来源

2012-09-05 16:35:30 dSquared

垂直jquery动画

回答

相关问题