JQuery показать / скрыть при наведении - PullRequest
Новая
       19

JQuery показать / скрыть при наведении

24 голосов
/ 23 марта 2011

У меня есть три ссылки: кошка, собака, змеи. При наведении на каждую из них содержание, относящееся к каждой ссылке, должно измениться.

Так что, если я наведу курсор мыши на кошку, то появится содержимое кошки, если я наведу указатель мыши на собаку, содержимое кошки плавно исчезнет, ​​а содержимое собаки появится ... и так далее. 

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>

Как мне заставить это работать полноценно, с некоторым плавным затуханием?

Ответы [ 4 ]

50 голосов
/ 23 марта 2011 
('.cat').hover(
  function () {
    $(this).show();
  }, 
  function () {
    $(this).hide();
  }
);

То же самое относится и к остальным.

Для плавного перехода можно использовать fadeIn и fadeOut

10 голосов
/ 23 марта 2011

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>

-edit-

да, конечно, вот, пожалуйста - JSFiddle

6 голосов
/ 13 августа 2014

Надеюсь, мой скрипт поможет вам. 

<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>
4 голосов
/ 23 марта 2011

Поскольку вы используете jQuery, вам просто нужно присоединиться к некоторым конкретным событиям и некоторым предварительно определенным анимациям: 

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

Затем, чтобы сделать анимацию, вам просто нужно вызвать анимацию fadeOut / fadeIn: 

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