JQuery show/hide when hover
Solution 1
('.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
Solution 2
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>
Solution 3
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
});
jayjay
Updated on October 11, 2020Comments
-
jayjay over 3 years
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?