...

View Full Version : Effects Bounce Issue. - Wont Stop Bouncing!



bilco
08-27-2009, 12:09 PM
Hi all.
I am trying to stop this script from continually running whilst to mouse is over the link.
I have tried using '.stop()', but to no avail. Perhaps i'm putting in the wrong place?

I would like the script to run just the once whilst the mouse is over the link.
Also, is their a way to stop the script 'cuing', if the mouse were to pass over the link a few times?

Can anyone offer advice on this?

All input will be greatly received.

Many thanks,
Bil




<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.bounce.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$('li').hover(function() {
$(this).effect("bounce", { times:0 }, 100);
}, function () {
});

});
</script>

Spudhead
08-27-2009, 02:10 PM
I think your problem is that the hover is getting called continually while the mouse is over it.

You need a flag to see if the thing is currently bouncing or not.

Try this - it's probably a rather inelegant solution but it seems to do the job:



$(document).ready(function() {
$("#d1").hover(
function () {
if ($(this).data("bouncing") == false || $(this).data("bouncing") == undefined){
$(this).effect("bounce", {times:3});
$(this).data("bouncing", true);
}
},
function () {
$(this).data("bouncing", false);
}
);
});

bilco
08-27-2009, 02:40 PM
Hi Spudhead,
Elegance is in the eye of the coder lol.
This works a hell of a lot better than anything else I've tried so far.
Many Thanks for that. :thumbsup:

My only problem with it now, is that when i pass the mouse over the link a few times, the bounce command seems to cue-up, and play one after the other, repeating itself a few times.

Is their a way to stop it cuing up another bounce whilst already bouncing?

Spudhead
08-27-2009, 05:34 PM
Man, that made me think :D

This is, again, not particularly elegant. There's probably a way to do it that doesn't involve setting two separate control variables just to check that:
(a) The bounce isn't running more than once between hover outs
(b) Another bounce isn't called while the first one is still running

But anyhow, the code below seems to do the job. Only tested in FF, see how you get on with it...



$(document).ready(function() {

$("#d1").hover(
function () {
var $this = $(this);
var bounceCount = $this.data("bounceCount");
bounceCount = (bounceCount == undefined) ? 0 : bounceCount;
$this.data("isHovering", true);
if (bounceCount < 1){
$this.effect("bounce", {times:3}, 300, function(){
$this.data("bouncing", false);
if ($this.data("isHovering") == true){
bounceCount++;
$this.data("bounceCount", bounceCount);
}
});
$this.data("bouncing", true);
}
},
function () {
var $this = $(this);
$this.data("bounceCount", 0);
$this.data("isHovering", false);
}
);

});

bilco
08-27-2009, 11:27 PM
Hi Spudhead.
That didn't seem to improve it unfortunately....
It's still calling the bounce while the first one is running....

Could it be anything to do with the fact i have it actioned on the <li> in my Nav positioned in a <ul> as below?




<div class="nav-bar">
<ul>
<li class="active">home</li>
<li>|</li>
<li><a href="about.html">about</a></li>
<li>|</li>
<li><a href="services.html">services</a></li>
<li>|</li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>



Iíve also tried adding a .stop() to eliminate any queue buildup.
I have seen it used in the below link, within this cracking jQuery Hover Effect.

Realistic-Hover-Effect (http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/)

Might this approach be applicable to my problem?

(Before your eyes glaze over, and you reach for a blunt implement,
thanks again :).)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum