动画显示和隐藏登录框

我是一个总的javascript/jquery noob。

我有一个包含登录框的div。该div的高度大约为150px，并且放置在页面的顶部，这样在加载页面时只能看到div的底部15px。

我想滑动div以便登录框的其余部分在点击时显示，并且在div的底部再次单击时使其滑回备份。现在

，我做的：

$('#showLogin').click(function(e){ 
$('#formContainer').animate({top: "+=135px"} , 1500) 
e.preventDefault() 
})

这样做是动画幻灯片的div下来。但是，我如何检查它是否已经滑落，以便我可以将它滑回去？

我应该检查div的位置并决定它应该向上还是向下移动，还是有更好的方法来做到这一点？

该网站是here

来源

2012-01-23 ppp

“我应该检查该div的位置，并决定是否应该上移或下移，或是否有更好的办法做到这一点？”我会说这是最简单的方法。 – j08691

如果在动画结束之前再次点击触发器div，该怎么办？ – ppp

这取决于你想要它做什么。您可以忽略点击并让动画继续，或使点击收回div。 jQuery是非常灵活的那样。） – j08691

试试这个jsFiddle的例子。它在点击时用一种形式激活div，并在完全扩展后将其缩回。

基本jQuery是：

$('div').click(function() { 
    var pos = $(this).css('top') 
    if (!$(this).is(':animated')) { 
     if (parseInt(pos, 10) == 0) { 
      $(this).animate({'top': '-35px'}); // anim up 
     } 
     else { 
      $(this).animate({'top': '0px'}); //anim down 
     } 
    } 
});

来源

2012-01-23 17:45:31 j08691

这正是我想要的。 – ppp

我认为你正在寻找.slideToggle()。举例：http://jsfiddle.net/FL4zZ/

来源

2012-01-23 16:56:46

这很有帮助，但在这种情况下它不起作用，因为单击时显示登录框的div位于登录框内。所以当我尝试.slideToggle时，div消失了。我已经上传了JavaScript文件，您可以在问题的链接上看到slideToggle的效果。 – ppp

动画显示和隐藏登录框

回答

相关问题