web-dev-qa-db-fra.com

JQuery afficher / masquer en survol

J'ai trois liens, chat, chien, serpents. Lorsque je passe la souris sur chacun, le contenu relatif à chaque lien doit changer.

Donc, si je survole le chat, le contenu du chat apparaîtra, si je survole le chien, le contenu du chat disparaîtra en douceur et le contenu du chien apparaîtra ... et ainsi de suite.

 Les liens sont: 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>

Comment puis-je obtenir que cela fonctionne pleinement, avec une décoloration en douceur?

jqueryjquery-pluginsjquery-selectorsjquery-events
24
jayjay
('.cat').hover(
  function () {
    $(this).show();
  }, 
  function () {
    $(this).hide();
  }
);

C'est la même chose pour les autres.

Pour un fondu progressif, vous pouvez utiliser fadeIn et fadeOut

50
Vivek

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>

-Éditer-

oui bien sûr, ici vous allez - JSFiddle

10
rsplak

J'espère que mon script vous aidera.

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

Mon script

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

 $(".mostrar-producto").mouseleave(function(){
      $(".producto").fadeOut();
  });
</script>
6
Ivan Carrasco Quiroz

Puisque vous utilisez jQuery, il vous suffit de vous attacher à certains événements spécifiques et à certaines animations prédéfinies:

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

Ensuite, pour faire l'animation, il vous suffit d'appeler les animations fadeOut/fadeIn:

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

En combinant les deux ensemble, vous insérez simplement les animations dans les rappels de survol (quelque chose comme ça, utilisez-le comme point de référence):

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