如何将jquery动画应用到弹出窗口？

我有一个简单的弹出与jquery，基本上如果按下按钮，一个div的'显示'在CSS中从'无'更改为'块'，并显示覆盖，使背景更暗。如何将jquery动画应用到弹出窗口？

见我的代码：

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();，但这显然不起作用。

我希望有人能帮助我。

非常感谢，

保罗

来源

2015-01-26 Paul

，而不是'$（ “＃登录”）的.toggle()功能CSS（{显示： '块'}。）;'尝试'$（“＃login”）。fadeIn（）;'。同样隐藏'$（“＃login”）。fadeOut（）;' – juanpastas 2015-01-26 18:22:44

@juanpastas这确实是一个很好的工作方式。非常感谢 – Paul 2015-01-26 19:15:55

你应该使用jQuery的.show()和.hide()方法作为参考here和here

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

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

如果你是交替的显示和隐藏，它可能是更容易使用引用here

来源

2015-01-26 18:23:31

完美，工作正常。谢谢！ – Paul 2015-01-26 19:14:43

如何将jquery动画应用到弹出窗口？

回答

相关问题