Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Effects Bounce Issue. - Wont Stop Bouncing!

    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

    Code:
    <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>

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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:

    Code:
    $(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);
    		}
    	);
    });

  • Users who have thanked Spudhead for this post:

    bilco (08-27-2009)

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    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.

    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?

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Man, that made me think

    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...

    Code:
    $(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);
    		}
    	);
    
    });

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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?

    Code:
    <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

    Might this approach be applicable to my problem?

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •