我用 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()' 函数,但这显然不起作用。
我希望有人能帮助我。
非常感谢,
保罗
最佳答案
您应该使用 jQuery .show()
和 .hide()
方法作为引用 here和 here
然后您可以使用 jQuery 的 api 轻松添加动画。
$( "#login" ).show( "slow", function() {
// Animation complete.
});
如果您要交替显示和隐藏,使用引用的 .toggle()
函数可能更容易 here
关于javascript - 如何将 jquery 动画应用于我的弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28156186/