JQuery的 - 創建一個隱藏如果你去/顯示內容

功能：http://www.awaismuzaffar.com/examples/content_1.html JQuery的 - 創建一個隱藏如果你去/顯示內容

您可以查看我的jQuery功能的演示。

基本上，它假設隱藏/顯示內容取決於哪個鼠標結束了哪些div。

但是，此時您會意識到，當鼠標懸停在所有div元素上時，所有文本都會相互重疊。

我需要找出一種方法來隱藏前一個div的內容，當鼠標在另一個div上時。不知道如何做到這一點。

這裏是jQuery的代碼片段：

$(document).ready(function(){ 
    var current_id; 
    $('div.video_image').hover(
     function(){ 
      current_id = $(this).attr('id').split('_')[1]; 
      $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');     
     } 
    ); 
});

感謝。

來源

2011-03-16 sidewinder

'jQuery'有一個'切換（）'方法。你應該使用這個。 – 2011-03-16 21:24:32

我會去與尼爾斯的建議和使用切換，如果您尋找「效果」，然後使用.fadeIn（）或.fadeOut（） – 2011-03-16 21:28:04

喜歡的東西可能會奏效。下面是這個腳本的動作的一例：http://jsbin.com/apiya3

$(document).ready(function(){ 
    var current_id, previous_id; 
    $('div.video_image').hover(
     function(){ 
      previous_id = current_id; 
      if (previous_id) 
       $('div#text_' + previous_id).stop().animate({'opacity': '0'}, 'slow'); 

      current_id = $(this).attr('id').split('_')[1]; 
      $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');     
    }); 
});

來源

2011-03-16 21:31:53

感謝您的所有答覆。這對我來說是一個很好的解決方案。你介意給我一個簡單的解釋，說明這是如何工作的？謝謝。 – sidewinder 2011-03-16 22:20:00

您是否嘗試過element.hide()和element.show()的功能？他們將速度作爲參數（例如'慢'，'快'等）。

來源

2011-03-16 21:25:46 Kon

一個解決辦法是清除大格（.empty功能），並把新的文本內（.append（）函數或.html（）函數）

來源

2011-03-16 21:31:12 Firemonkey

您應該使用代替懸停鼠標懸停及移出功能，因爲當你將鼠標移開元素懸停不復位。此外，show（）和hide（）函數比動畫不透明度更容易。

$(document).ready(function(){ 
var current_id; 
$('div.video_image').mouseover(
    function(){ 
     current_id = $(this).attr('id').split('_')[1]; 
     $('div#text_' + current_id).stop().show('slow');     
    }); 
$('div.video_image').mouseout(
    function(){ 
     $('div#textcontainer).children().hide('slow'); 

});

或者類似的東西，至少...

來源

2011-03-16 21:34:31 Jack

JQuery的 - 創建一個隱藏如果你去/顯示內容

回答

相關問題