我正在制作作品集，每当我单击链接时，正确的 div 会淡入/淡出，但随后所有内容都会淡出。
我想做的是有多个链接，无论我点击什么链接，它都会隐藏其余链接。无法弄清楚出了什么问题。
$('#about').on('click', function() {
$('div').not('.about-content, .about-content2, .about-img').fadeOut(1000, 'swing', function(){
$('.about-content').fadeIn(1000, 'swing');
$('.about-content2').fadeIn(1000, 'swing');
$('.about-img').fadeIn(1000, 'swing');
});
})/* content */
.about-content, .about-content2 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="grid">
<div class="nav-left">
<a href="#" id="home">Name</a>
</div>
<div class="nav-right">
<a href="#" id="about">About</a>
</div>
<!-- home -->
<div class="home-content">
<p>Web Developer</p>
</div>
<!-- about -->
<div class="about-content">
<h2>About</h2>
<p>Lorem</p>
</div>
<div class="about-content2">
<p>Ipsum</p>
<div class="about-img">
<img src="img/pic.jpg">
</div>
</div>
</body>最佳答案
检查你的代码行为:
$('#about').on('click', function() {
$('div').not('.about-content, .about-content2, .about-img').fadeOut(1000, 'swing', function(){
$('.about-content').fadeIn(1000, 'swing');
$('.about-content2').fadeIn(1000, 'swing');
$('.about-img').fadeIn(1000, 'swing');
});
})
如果您正在执行一个 fadeOut，然后一个 fadeIn 函数，您有这两种行为是正常的，请清除它:
$('#about').on('click', function() {
$('div').not('.about-content, .about-content2, .about-img', function(){
$('.about-content').fadeIn(1000, 'swing');
$('.about-content2').fadeIn(1000, 'swing');
$('.about-img').fadeIn(1000, 'swing');
});
})
关于javascript - div 正在淡入，但突然淡出(Jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50212289/