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

How do I apply jquery animation to my popup?

本文关键字：我的 窗口 应用于 动画 jquery      更新时间：2023-09-26

>我用jquery创建了一个简单的弹出窗口，基本上如果按下一个按钮，div的"显示"在css中从"无"变为"阻止"，并显示一个叠加层以使背景更暗。

查看我的代码：

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>

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

我希望有人能帮助我。

非常感谢，

保罗

你应该使用这里和这里引用的 jQuery .show()和.hide()方法

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

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

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

相关文章：