jQuery的點擊淡入/淡出

我有一個大概愚蠢的問題，但我無法弄清楚我自己......jQuery的點擊淡入/淡出

我想或者淡入/淡出2個格由cliking上的第三個。

下面是HTML：

<div id="a"> </div> 
<div id="alpha"> ALPHA </div> 
<div id="beta"> BETA </div>

的CSS：

#a { width: 200px; height: 40px; line-height: 40px; background-color: red; text-align: center; } 
#a:hover { cursor: pointer; } 
#alpha, #beta { width: 200px; height: 100px; margin-top: 20px; } 
#alpha { background-color: blue; } 
#beta { background-color: green; }

和JS：

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('#alpha').fadeOut("slow", function() { 
      $('#beta').fadeIn(); 
     }); 
    }); 
});

我可以做的第一個動畫（fadeOut alpha，fadeIn beta），但在第二次點擊時，我想做相反的操作等等......

有什麼建議嗎？

感謝

來源

2014-01-06 Julius Pepperwood

你的HTML改爲：

<div id="a"> 

</div> 

<div class="alpha"> ALPHA </div> 
<div class="alpha"> BETA </div>

所以你可以使用類因爲ID是唯一的，你可以通過一個控制的兩個而不是一個。

現在你有兩個選擇。

使用fadeToggle（JavaScript）的：

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('.alpha').fadeToggle(); 
    }); 
});

DEMO

創建改變變量（JavaScript）的： VAR阿爾法= 0; （'。alpha'）。fadeTo（）函數（）{（'＃beta'）。hide（）; $（'＃a'）。click（function（）{ （ '慢'，阿爾法）; 如果（阿爾法== 0）{ 阿爾法 = 1; }否則{ 阿爾法 = 0;} }）; }）;

DEMO

我將使用第一個選項，因爲它需要較少的代碼更容易閱讀。

來源

2014-01-06 00:19:55 Cilan

您可以選擇兩個元素並過濾可見的一個，.fadeOut()可見的一個和.fadeIn()隱藏的一個。

var $e = $('#beta, #alpha').filter('#beta').hide().end(); 

$('#a').click(function() { 
    $e.filter(':visible').fadeOut("slow", function() { 
     $e.not(this).fadeIn(); 
    }); 
});

http://jsfiddle.net/ShLqJ/8/

來源

2014-01-06 00:22:57 undefined

我認爲這是我最喜歡的解決方案。 – Jivings

謝謝，這正是我正在尋找的代碼類型！ –

嘗試

$(document).ready(function() { 
    $('#beta').hide(); 
    var el = '#alpha'; 
    $('#a').click(function() { 
     $(el).fadeOut("slow", function() { 
      el = el == '#alpha' ? '#beta' : '#alpha'; 
      $(el).fadeIn(); 
     }); 
    }); 
});

演示：Fiddle

來源

2014-01-06 00:23:46

下面是這兩者之間翻轉版本：

http://jsfiddle.net/ShLqJ/9/

$(document).ready(function(){ 
    $('#beta').hide(); 
    $('#a').click(function() { 
     $('#alpha').toggle(500); 
     $('#beta').toggle(500); 
    }); 
});

來源

2014-01-06 00:24:54

這很不錯，但不是要求的過渡效果。 – Jivings

我想不出比使用條件語句其他更好的辦法：

http://jsfiddle.net/ShLqJ/10/

$(document).ready(function(){ 
    var $alpha = $('#alpha'), 
     $beta = $('#beta').hide(); 

    $('#a').click(function() { 
     var $in, $out; 
     if($alpha.is(':visible')) { 
      $in = $beta, $out = $alpha; 
     } else { 
      $in = $alpha, $out = $beta; 
     } 

     $out.fadeOut("slow", function() { 
      $in.fadeIn(); 
     }); 
    }); 
});

來源

2014-01-06 00:25:27 Jivings

jQuery讓這真的很容易在這裏是一個示例使用fadeToggle()：

$(document).ready(function(){ 
    $('#a').click(function() { 
     $('#alpha').fadeToggle(); 
     $('#beta').fadeToggle(); 
    }); 
});

你只需要用display: hidden開始其中一個div。

這是JSFiddle

來源

2014-01-06 00:32:05

jQuery的點擊淡入/淡出

回答

相關問題