javascript - 如何将 jquery 动画应用于我的弹出窗口？

Question

我用 jquery 创建了一个简单的弹出窗口，基本上如果按下一个按钮，div 的“显示”在 css 中从“无”变为“ block ”并显示一个覆盖层以使背景更暗。

查看我的代码:

function div_show() {
    $("#login").css({display:'block'});
    $("#overlay").css({background:'#000'});
    $("#overlay").css({zIndex:'2'});
}
//Function to Hide Popup
function div_hide(){
    $("#login").css({display:'none'});
    $("#overlay").css({background:'none'});
    $("#overlay").css({zIndex:'-1'});
}

如果方便的话，弹出窗口本身 (html):

 <div id="overlay"></div>

    <button onClick="div_show()">Click me</button>

    <div id="login">
            <div id="loginpopup">
                stuff
            </div> 
    </div>

当这个弹出窗口显示时，我想要一个动画，比如淡入淡出，但我没有成功。我尝试将 $("#login").fadeIn(); 添加到 'div_open()' 函数，但这显然不起作用。

我希望有人能帮助我。

非常感谢，

保罗

Answer 1

您应该使用 jQuery .show() 和 .hide() 方法作为引用 here和 here

然后您可以使用 jQuery 的 api 轻松添加动画。

 $( "#login" ).show( "slow", function() {
      // Animation complete.
 });

如果您要交替显示和隐藏，使用引用的 .toggle() 函数可能更容易 here