web-dev-qa-db-ja.com

ホバー時にJQueryを表示/非表示

猫、犬、ヘビの3つのリンクがあります。それぞれにカーソルを合わせると、各リンクに関連するコンテンツが変更されます。

したがって、猫の上にマウスを移動すると、猫のコンテンツが表示されます。犬の上にマウスを移動すると、猫のコンテンツがスムーズに消え、犬のコンテンツが表示されます...など。

リンクは次のとおりです。DogCat Snake 

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

スムーズなフェードでこれを完全に機能させるにはどうすればよいですか？

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

他の人も同じです。

スムーズなフェードインには、fadeInと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>

-編集-

ええ、確かに ここに行く-JSFiddle

10
rsplak

私のスクリプトがお役に立てば幸いです。

<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>
6
Ivan Carrasco Quiroz

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);
});

2つを組み合わせると、ホバーコールバックにアニメーションを挿入するだけです（そのようなものを参照ポイントとして使用します）。

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