CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-selectorsjquery-events
jayjay
jayjay

Reputation: 407

JQuery show/hide when hover

I have three links, Cat, Dog, Snakes. When I hover over each, the content relating to each link should change.

So if i hover over cat, then cat content will appear, if i hover over dog the cat content will smoothly disappear and the dog content will appear... and so on.

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>

How do I get this to be full blown working, with some smooth fading?

Upvotes: 30

Views: 112666

Answers (5)

eQ19
eQ19

Reputation: 10711

This code also works.

$(".circle").hover(function() {$(this).hide(200).show(200);});
.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:black;
    line-height:100px;
    text-align:center;
    background:yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="circle">hover me</div>

Upvotes: 0

Ivan Carrasco Quiroz
Ivan Carrasco Quiroz

Reputation: 615

I hope my script help you.

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

My script

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

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

Upvotes: 7

Vivek
Vivek

Reputation: 11028

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

It's the same for the others.

For the smooth fade in you can use fadeIn and fadeOut

Upvotes: 56

user657496
user657496

Reputation:

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-

yeah sure, here you go -- JSFiddle

Upvotes: 10

Tejs
Tejs

Reputation: 41256

Since you're using jQuery, you just need to attach to some specific events and some pre defined animations:

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

Then, to do the animation, you simply need to call the fadeOut / fadeIn animations:

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

Combining the two together, you would simply insert the animations in the hover callbacks (something like so, use this as a reference point):

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

Upvotes: 4

Related Questions