JQuery顯示/隱藏時懸停

我有三個鏈接，貓，狗，蛇。當我將鼠標懸停在每個鏈接上時，與每個鏈接有關的內容都應該改變。JQuery顯示/隱藏時懸停

因此，如果我將鼠標懸停在貓身上，那麼貓的內容就會出現，如果我將鼠標懸停在狗身上，貓的內容將會順利消失，狗的內容將會出現......等等。

 
Links are: Dog Cat Snake

<div> 
    <span style="display:none;"> Cat Content</span> 
    <span style="display:none;"> Dog Content</span> 
    <span style="display:none;"> Snake Content</span>  
</div>

我如何獲得這是完全成熟的工作，有一些光滑的衰落？

來源

2011-03-23 jayjay

我可以使用jQuery標籤:)它的要好得多，並使用鼠標選項，http://jqueryui.com/demos/tabs/#mouseover演示鏈接，我知道它可能不是你的正確的事情，但嘿，你可以使用它，也有免費的主題:) – Val 2011-03-23 12:00:44

沒有這種方式，我不喜歡 – jayjay 2011-03-23 12:39:16

('.cat').hover(
    function() { 
    $(this).show(); 
    }, 
    function() { 
    $(this).hide(); 
    } 
);

對於其他人也是如此。

對於你順利褪色可以使用fadeIn和fadeOut

來源

2011-03-23 11:57:26 Vivek

有無論如何，你可以在http://jsfiddle.net上顯示一個例子，它會真的幫助。 – jayjay 2011-03-23 12:26:46

的jQuery：

$('div.animalcontent').hide(); 
$('div').hide(); 
$('p.animal').bind('mouseover', function() { 
    $('div.animalcontent').fadeOut(); 
    $('#'+$(this).attr('id')+'content').fadeIn(); 
});

HTML：

<p class='animal' id='dog'>dog url</p><div id='dogcontent' class='animalcontent'>Doggiecontent!</div> 
<p class='animal' id='cat'>cat url</p><div id='catcontent' class='animalcontent'>Pussiecontent!</div> 
<p class='animal' id='snake'>snake url</p><div id='snakecontent'class='animalcontent'>Snakecontent!</div>

CNC中

對沒錯，here you go -- JSFiddle

來源

2011-03-23 11:58:00 rsplak

嘿，你可以在http://jsfiddle.net上看到這個，這將是真正有幫助 – jayjay 2011-03-23 12:25:46

嘿，這是完美的...非常感謝...我想我可以建立在這..現在我看到你是怎麼做的它。 – jayjay 2011-03-23 12:41:27

好聽！很高興我能幫上忙。它解決了，請接受這個答案。 – rsplak 2011-03-23 12:48:23

由於您使用jQuery的，你只需要連接到一些具體的事件和一些預定義的動畫：

$('#cat').hover(function() 
{ 
    // Mouse Over Callback 
}, function() 
{ 
    // Mouse Leave callback 
});

然後，做動畫，你只需要調用淡出/淡入動畫：

$('#dog').fadeOut(750 /* Animation Time */, function() 
{ 
    // animation complete callback 
    $('#cat').fadeIn(750); 
});

結合兩者結合起來，你只需插入動畫在懸停回調（類似的話，用這個作爲參考點）：

$('#cat').hover(function() 
{ 
    if($('#dog').is(':visible')) 
     $('#dog').fadeOut(750 /* Animation Time */, function() 
    { 
     // animation complete callback 
     $('#cat').fadeIn(750); 
    }); 
}, function() 
{ 
    // Mouse Leave callback 
});

來源

2011-03-23 11:58:40 Tejs

嘿有無論如何你可以顯示在http://jsfiddle.net – jayjay 2011-03-23 12:25:19

我希望我的腳本能幫助你。

<i class="mostrar-producto">mostrar...</i> 
<div class="producto" style="display:none;position: absolute;">Producto</div> 

<script>$(".mostrar-producto").mouseover(function(){ 
     $(".producto").fadeIn(); 
     }); 
     $(".mostrar-producto").mouseleave(function(){ 
     $(".producto").fadeOut(); 
     }); 
</script>

:-)

來源

2014-08-12 20:25:48

爲了避免排隊許多動畫，你可以在fadeout或fadeIn之前添加stop（），比如'$（「。producto」）。stop（）。fadeIn ）;'。 – Zitrax 2017-05-18 20:51:59

JQuery顯示/隱藏時懸停

回答

相關問題