JQuery शो/छुपाएं जब होवर

Question

मेरे पास तीन लिंक, बिल्ली, कुत्ते, सांप हैं। जब मैं प्रत्येक पर होवर करता हूं, तो प्रत्येक लिंक से संबंधित सामग्री बदलनी चाहिए।

तो अगर मैं बिल्ली पर होवर करता हूं, तो बिल्ली सामग्री दिखाई देगी, अगर मैं कुत्ते पर होवर करता हूं तो बिल्ली की सामग्री आसानी से गायब हो जाएगी और कुत्ते की सामग्री दिखाई देगी ... और इसी तरह।

 
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> 

कैसे मैं कुछ चिकनी लुप्त होती के साथ, यह पूर्ण विकसित होने के लिए काम कर रहे मिलता है?

Answer 1

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

यह दूसरों के लिए समान है।

के लिए आप में चिकनी फीका fadeIn और fadeOut

Answer 2

उपयोग कर सकते हैं jQuery:

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

एचटीएमएल:

<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> 

-edit-

हाँ ज़रूर, here you go -- JSFiddle

, तो आप बस fadeOut/fadein एनिमेशन कॉल करने की आवश्यकता तब

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

, एनीमेशन करना है:

Answer 3

आप jQuery का उपयोग कर रहे हैं, इसलिए आपको बस कुछ विशिष्ट घटनाओं और कुछ पूर्व परिभाषित एनिमेशन के साथ जोड़ने की आवश्यकता:

$('#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 
}); 

Answer 4

मुझे आशा है कि मेरी स्क्रिप्ट आपकी मदद करेगी।

<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> 

:-)