Here's the final version that works fine!
所以,我有多个 div,每个都包含一个按钮,用于淡入另一个 div,然后自己淡出。当我淡入一个 div 时,所有其他 div(通过按钮淡入)都将淡出。可能很难理解,但是here is my FIDDLE
Div 1 带有淡入 div 2 的按钮(显示:无;)
<div class="cnt" id="cnt-1">CONTENT 1<br>
<div class="btn" id="btn-1">BUTTON 1</div>
</div>
<div class="cnt" id="cnt-2">CONTENT 2<br>
<div class="btn" id="btn-2">BUTTON 2</div>
</div>
Div 3 带有淡入 div 4 的按钮(显示:无;)
<div class="cnt" id="cnt-3">CONTENT 3<br>
<div class="btn" id="btn-3">BUTTON 3</div>
</div>
<div class="cnt" id="cnt-4">CONTENT 4<br>
<div class="btn" id="btn-4">BUTTON 4</div>
</div>
等等……
JS淡出1淡入2
$('#btn-1').click(function(e){
$('#cnt-1, #cnt-4, #cnt6').fadeOut('slow', function(){
$('#cnt-2').fadeIn('slow');
});
});
$('#btn-2').click(function(e){
$('#cnt-2').fadeOut('slow', function(){
$('#cnt-1, #cnt-3, #cnt-5').fadeIn('slow');
});
});
如您所见,div 不会同时淡出并跳来跳去,这是我的问题。
最佳答案
尝试 this :
$('#btn-1').click(function(e){
$('#cnt-1').fadeOut('slow', function(){
$('#cnt-2').fadeIn('slow');
});
$('#cnt-4').fadeOut('slow', function(){
$('#cnt-3').fadeIn('slow');
});
$('#cnt-6').fadeOut('slow', function(){
$('#cnt-5').fadeIn('slow');
});
});
单独为按钮 btn-1
做了。
关于jquery - 淡入/淡出多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22603863/