Javascript动画

debugcn 发表于 Dev

丹尼尔·琼斯（Daniel Jones）

在我的网页上，我有一个“成员”按钮，当切换时，该按钮会为下拉菜单设置动画效果。唯一的问题是，每次我加载页面时，它都会动画显示，而无需单击按钮来执行该操作。我希望它仅在单击按钮时打开，并在其余时间完全隐藏。

我正在使用的javascript是：

$(document).ready(function() {
    $('#members').animate({
        marginTop: '-80px'
    }, 0);

    $('.mem').toggle( function() {
        $('#members').animate({
            marginTop: '0'
        }, 500);
    },
    function() {
        $('#members').animate({
        marginTop: '-80px'
        }, 500);
    });
});

如您所见，它首先将div动画化为-80px。我希望它是-80px，而不必每次加载任何页面时都对其进行动画处理。

谢谢！

奥昆·尤塞尔

对于#members css类，只需添加以下内容：

display:none;

我还更新了javascript：

$(document).ready(function() {
    $('#members').css({
        marginTop: '-80px'
    });
    $('.mem').toggle(function(){
        $('#members').css({
            display: 'block'
        });
        $('#members').animate({
            marginTop: '0'
        }, 500);
    },
    function(){
        $('#members').animate({
            marginTop: '-80px'
        }, 500);
    });
});