CODEWITHSUNDEEP
jquery
Scott
Scott

Reputation: 15

jQuery effect goes once but I need it to recur

I'm using .fadeIn and .fadeOut and can get the effect to happen once, the problem is getting it to happen each time the link is moused over. I've tried dripping in .deQueue() and .stop() to no avail. (newb here, so please be patient and thorough in your explanation - much is still over my head)

<!DOCTYPE html>
<html>
<head>

<style>
p { position:relative; width:400px; height:90px; }
div {
position:fixed;
padding-top:25px;  
top:300px;
left:300px;
display:none;
}
span { display:none; } 
</style>

<script type="text/javascript" src="jQuery.js"></script>

</head>

<body>

<a href="#">MouseOver!</a>

<h3><div><span>Sample Text</span></div></h3>

<script>
$("a").mouseover(function () { 
$("div").fadeIn(0, function () { 
$("span").fadeIn(3000);
}); 
return false; 
});  

$("a").mouseout(function () { 
$("h3").fadeOut(3000);
});

</script>

</div>
</body>
</html>

Upvotes: 0

Views: 99

Answers (5)

karim79
karim79

Reputation: 342695

That's because you're fading those elements in, but not changing their visible state on mouseout. You can use the hover event with a single function to achieve the desired behaviour.

$("a").hover(function() {
    $("div").fadeToggle(3000);
    return false;
});

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Looks like you are fading div and span both. If you are fading any element then child elements are also faded. Try this

$("a").mouseover(function () { 

   $("div").fadeIn(3000); 
   return false; 

}).mouseout(function () { 
   $("div").fadeOut(3000);
});

Upvotes: 1

Loktar
Loktar

Reputation: 35319

Its because you are fading out the parent element h3 You cant fade in the others when its hidden. Your div, also starts hidden forcing you to display it in order to fade in the span. I would honestly just change your markup to something more simple, or at least remove one layer of hidden elements.

Below will work if you remove dispay : none from your div in the css.

Live Demo

$("a").hover(function(){
        $("span").fadeIn(300);
},function(){
        $("span").fadeOut(300);
});

Also its easier to use hover, because you can then control what happens in one method.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175028

Well of course it only runs once, you fade in the div and the span, but you fade out the h3. Also your markup makes no sense. Consider this improvement: http://jsfiddle.net/RikudoSennin/gRAGe/

It consists of jQuery and HTML improvements. Please go over them and consider using this better example.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78560

It's your selector. You fade in a span but fade out an h3. Thus the containing h3 will never be faded back in.

You need

$("span").fadeIn(3000);
...
$("span").fadeOut(3000);

Upvotes: 1

Related Questions