將HTML複製並褪色到懸停頁面上的另一個位置

-1

我試圖將標題和描述中的HTML跨越每個li中的HTML跨越到下面的info div中。最好附加標題周圍H2標籤，而衰落了。如果另一個李懸停當前選擇應該淡出，並在...新的一個褪色將HTML複製並褪色到懸停頁面上的另一個位置

HTML

<li> 
     <a class="sales1" href="#"><img alt="Sales" src="sample.png"> 
     <span class="drinkTitle">Test Title<span> 
     <span class="drinkDesc">A test Description</span></span></a> 
    </li> 

<div id="drinksInfo"></div>

JQUERY

$('#drinksList ul li img').hover(function() { 
     var str = $(this).siblings('.drinksTitle').text(); 
      $('#drinksInfo').html(str).fadein(); 
});

任何幫助，將不勝感激。

來源

2011-08-11 Andy

什麼部分是不工作？你什麼錯誤？ – Veger

什麼也沒有發生 – Andy

Live Demo

$('li').mouseover(function() { 
     var title = $(this).find('.drinkTitle').text(), 
      descrip = $(this).find('.drinkDesc').text(); 

    if(!$(this).hasClass('selected')){ 
     $('.selected').removeClass('.selected'); 
     $(this).addClass('.selected'); 

     $('#drinksInfo').fadeOut(500, function(){ 
      $('#drinksInfo').html('<h2>' + title + '</h2>' + descrip).fadeIn(); 
     }); 
    } 
} 
);

來源

2011-08-11 21:11:22 Loktar

它似乎包括一個額外的動畫，其閃爍...感謝您的輸入，雖然 – Andy

我得到了它的工作，謝謝，它是drinksInfo div沒有清除其他位，所以它執行錯誤的操作...謝謝Loktar – Andy

試試這個。您可以根據需要指定fadeIn效果的持續時間。

工作demo

$(function(){ 

    $('#drinksList img').hover(function() { 

     var str = $(this).siblings('.drinkTitle').text() + " " + 
      $(this).siblings('.drinkDesc').text() ; 
     $('#drinksInfo').html("<h2>"+str+"</h2>").hide().fadeIn(500); 

    }, function(){ 
     $('#drinksInfo').fadeOut(500); 
    }); 

});

來源

2011-08-11 20:56:21 ShankarSangoli

沒有快樂我害怕...我只是在後面的h2包裝標題，如果可能的話。 – Andy

你能改正你的html錯誤，並嘗試嗎？ – ShankarSangoli

它的工作，但不褪色 – Andy

讓它一試！

你<span class="drinkTitle">無法正常關閉，
您sibling('.drinksTitle')不匹配<span id="drinkTitle>
它是不是褪色我ň褪色我。（請參閱docs）
要實現淡入淡出效果，您需要先隱藏<div>。這可以使用display: none代碼在CSS中完成。

這就是我所想的。（除了在<div>文本的樣式，但不應該是一個（真正的）問題。

來源

2011-08-11 21:01:04 Veger

這是我的一個學校的男孩錯誤... :( – Andy

@安迪：猜猜發現的所有問題，看我更新的答案和解釋 – Veger

謝謝維格我改變了所有這些位，你說得很對。行動它在螢火蟲有沒有得到泵入div ...然而，正確的類現在，因爲你提到 – Andy

將HTML複製並褪色到懸停頁面上的另一個位置

回答

相關問題