我正在学习jQuery,到目前为止这是我的代码:
<script type="text/javascript">
$(document).ready(function(){
$('#login').click(function(){
$('#login-box').fadeIn('fast');
});
});
</script>
当您单击登录按钮时,它会起作用,在页面上显示名为login-box
的DIV。我想要做的是如果再次点击登录按钮,login-box
DIV将从页面淡出。最好的方法是什么?我在想:
$(document).ready(function(){
$('#login').click(function(){
if(login-box-is-showing)
{
$('#login-box').fadeOut('fast');
} else {
$('#login-box').fadeIn('fast');
}
});
});
但我很困惑如何确定DIV是否正在显示。我也看到jQuery有一个切换功能,会更好吗?
感谢。
答案 0 :(得分:4)
$("#login-box:visible")
会告诉您它是否可见,而$("#login-box:hidden")
会告诉您它是否可见。但是,如果您想要一些额外的效果,更简单的方法是使用$.toggle()
甚至$.slideToggle()
。
答案 1 :(得分:3)
我想你想使用toggle()。
答案 2 :(得分:3)
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
然后,你可以这样做:
$("#login").click(function () {
$("#login-box").fadeToggle()
});