JQuery show/hide when hover

Question

Tengo tres enlaces, Cat, Dog, Snakes. Cuando cierro sobre cada uno, el contenido relacionado con cada enlace debe cambiar.

Así que si me cierro sobre el gato, aparecerá el contenido del gato, si me cierne sobre el perro, el contenido del gato desaparecerá sin problemas y aparecerá el contenido del perro ... y así sucesivamente.

 
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> 

¿Cómo consigo que se trata de trabajo completo soplado, con un poco de decoloración suave?

Answer 1

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

Es lo mismo para los demás.

Para el fundido liso en que se puede utilizar fadeIn y fadeOut

Answer 2

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> 

operación -Editar-

si claro, here you go -- JSFiddle

Answer 3

Dado que está utilizando jQuery, sólo tiene que conectar a algunos eventos específicos y algunos pre definido animaciones:

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

Luego, para hacer la animación, sólo hay que llamar a las animaciones fadeOut/fadeIn:

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

combinación de los dos juntos, sólo tendría que insertar las animaciones en las devoluciones de llamada de la libración (algo así como así, utilizar esto como un punto de referencia):

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

Espero que mi script lo ayude.

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

:-)