Question

我正在尝试创建一个jquery动画登录框。

我是一个完整的javascript / jquery noob。

我有一个包含登录框的div。该div的高度约为150px，它位于页面的顶部，因此在加载页面时只能看到div的底部15px。

我正在尝试向下滑动div，以便在点击时显示登录框的其余部分，并在再次单击div的底部时使其向上滑动。

现在，我正在做：

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

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

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

网站为here

Answer 1

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

Answer 2

试试这个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
        }
    }
});

动画显示和隐藏登录框

2 个答案: