花花公子!长期潜伏着 . 第一个问题 .
带有导航菜单的简单页面,触发淡入内容div . 淡入点击功能,淡出,如果切换目标!= href(“#”) . 脚本有效,但这是一个解决方法 . 这里必须有一个更简单的方法 .
JS:
$(document).ready(function(){
$(".toggle1").click(function(){
$('#div1').delay(500).fadeIn('fast');
$('#div2').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle2").click(function(){
$('#div2').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle3").click(function(){
$('#div3').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div2').fadeOut('slow');
});
});
HTML:
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
有没有办法让一个toggle类功能,如果a href == #div,淡入?否则,淡出?
为清楚起见,我不希望用户在第二次点击相同的导航目标时淡出淡出淡出 . 仅当选择了新目标时,当前div才会淡出 .
谢谢,人!
3 回答
您可以使用属性以selector开头,
.filter()
,.stop()
,if
条件来检查元素opacity
,然后再继续动画这将是我的淡出解决方案 . 这不是您正在寻找的解决方案,但我确信您可以将其更改为您想要的概念 . 您还可以在元素上设置.data以了解该元素是否已经淡出 .
https://api.jquery.com/jquery.data/
我的建议是: