花花公子!长期潜伏着。第一个问题。
简单页面,导航菜单触发淡入内容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>
有没有办法让一个切换类功能,如果a href == #div,淡入?否则,淡出?
为清楚起见,我不希望用户在第二次点击相同的导航目标时淡出淡出淡出。只有选择了新目标时,当前div才淡出。
谢谢,人们!
答案 0 :(得分:1)
您可以在继续动画之前使用属性以选择器,.filter()
,.stop()
,if
条件开头检查元素opacity
$().ready(function() {
$("[class^=toggle]").click(function(e) {
e.preventDefault();
var hash = $("#" + this.href.split(/#/).pop());
if (hash.css("opacity") < 1) {
$("[id^=div]").stop().fadeTo("fast", 0)
.filter(hash).delay(500).fadeTo("slow", 1)
}
})
})
&#13;
[id^="div"] {
opacity: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<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>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
&#13;
答案 1 :(得分:0)
这将是我的淡出解决方案。这不是您正在寻找的解决方案,但我确信您可以将其更改为您想要的概念。您还可以在元素上设置.data,以了解该元素是否已经淡化。
https://api.jquery.com/jquery.data/
$(document).ready(function(){
$(".toggle1").click(function() {
href = $(this).attr("href");
if(href.includes("#div")) {
$('a[href=#div1]').delay(500).fadeIn('fast');
$('a[href=#div2]').fadeOut('slow');
$('a[href=#div3]').fadeOut('slow');
}
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="fademe">
testing
</div>
&#13;
答案 2 :(得分:0)
我的建议是:
$(function () {
$('[href^="#div"]').click(function () {
$(this).delay(500).fadeIn('fast');
var siblings = $(this).parent().siblings();
$('[href="' + siblings.eq(0).children('a').attr("href") + '"]').fadeOut('slow', function() {
$('[href="' + siblings.eq(1).children('a').attr("href") + '"]').fadeOut('slow');
});
});
$('#btn').on('click', function(e) {
$('[href^="#div"]').show();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<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>
<button id="btn">Make visible all elements</button>