need some help getting jQuery Wiggle Plugin working correctly?

**PicnicTutorials** · Nov 27, 2012 04:40

Below is a working copy. However, it just wiggles constantly. I would like it to wiggle every 10 seconds for 1 minute and then stop. Also I would prefer it to wiggle less and slower. I've exhausted google looking for an answer. Here is the plugin home page. http://www.class.pm/files/jquery/jquery.wiggle/demo/ But he doesnt go into much detail on the how tos. Thanks!

And online http://www.visibilityinherit.com/projects/wiggle.html

Code JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/*!
 * jQuery Wiggle
 * [url]http://www.userdot.net/#!/jquery[/url]
 *
 * Copyright 2011, UserDot [url]www.userdot.net[/url]
 * Licensed under the GPL Version 3 license.
 * Version 1.0.0
 *
 */
(function($) {
    $.fn.wiggle = function(method, options) {
        options = $.extend({
            degrees: ['2','4','2','0','-2','-4','-2','0'],
            delay: 35,
            limit: null,
            randomStart: true,
            onWiggle: function(o) {},
            onWiggleStart: function(o) {},
            onWiggleStop: function(o) {}
        }, options);
        var methods = {
            wiggle: function(o, step){
                if (step === undefined) {
                    step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                }
                if (!$(o).hasClass('wiggling')) {
                    $(o).addClass('wiggling');
                }
                var degree = options.degrees[step];
                $(o).css({
                    '-webkit-transform': 'rotate(' + degree + 'deg)',
                    '-moz-transform': 'rotate(' + degree + 'deg)',
                    '-o-transform': 'rotate(' + degree + 'deg)',
                    '-sand-transform': 'rotate(' + degree + 'deg)',
                    'transform': 'rotate(' + degree + 'deg)'
                });
                if (step == (options.degrees.length - 1)) {
                    step = 0;
                    if ($(o).data('wiggles') === undefined) {
                        $(o).data('wiggles', 1);
                    }
                    else {
                        $(o).data('wiggles', $(o).data('wiggles') + 1);
                    }
                    options.onWiggle(o);
                }
                if (options.limit && $(o).data('wiggles') == options.limit) {
                    return methods.stop(o);
                }
                o.timeout = setTimeout(function() {
                    methods.wiggle(o, step + 1);
                }, options.delay);
            },
            stop: function(o) {
                $(o).data('wiggles', 0);
                $(o).css({
                    '-webkit-transform': 'rotate(0deg)',
                    '-moz-transform': 'rotate(0deg)',
                    '-o-transform': 'rotate(0deg)',
                    '-sand-transform': 'rotate(0deg)',
                    'transform': 'rotate(0deg)'
                });
                if ($(o).hasClass('wiggling')) {
                    $(o).removeClass('wiggling');
                }
                clearTimeout(o.timeout);
                o.timeout = null;
                options.onWiggleStop(o);
            },
            isWiggling: function(o) {
                return !o.timeout ? false : true;
            }
        };
        if (method == 'isWiggling' && this.length == 1) {
            return methods.isWiggling(this[0]);
        }
        this.each(function() {
            if ((method == 'start' || method === undefined) && !this.timeout) {
                methods.wiggle(this);
                options.onWiggleStart(this);
            }
            else if (method == 'stop') {
                methods.stop(this);
            }
        });
        return this;
    }
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
   $('.wiggle').wiggle();
});
</script> 
<style type="text/css">
 
</style> 
</head>
<body>
 
<img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle">
 
</body>
</html>

**Pullo** · Nov 27, 2012 06:46

Hi Eric,

I might be missing something, but the wiggle plugin seems to have a stop method, e.g.

Code JavaScript:

$('div#wigglewrapper img').wiggle('stop');

So couldn't you just use setTimeOut when your page loads (or whenever the wiggle effect starts) to call wiggle('stop') after 60 seconds?

**PicnicTutorials** · Nov 27, 2012 06:49

maybe but I also need it to wiggle for 1 second - every 10 seconds - for one minute - then stop.

**Pullo** · Nov 27, 2012 07:28

Hi,

If you put this code at the bottom of the example page you posted, it will do what you want.
Hopefully it's quite self-explanatory, but if you have any questions, let me know.
I can also post a sample page if it helps.

Code JavaScript:

function wiggleForOneSecond(t){
  t.wiggle();
  setTimeout(function(){t.wiggle('stop')},1000)
}
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  wiggleForOneSecond(thingToWiggle);
  s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},61000)
});

**PicnicTutorials** · Nov 27, 2012 09:31

Awesome that works perfect - than you very much! Anyway to retool that a little so it starts the wiggle 10 seconds after page load and aborts on each page once hovered over? Two reasons... once hovered over they've seen it. And two it's in a sprite which gets bigger on hover. Dont want to mix animations.

**Pullo** · Nov 27, 2012 09:57

Originally Posted by EricWatson

Anyway to retool that a little so it starts the wiggle 10 seconds after page load and aborts on each page once hovered over?

The first part is easy. Just remove the first call to wiggleForOneSecond();
As for the second part - it shouldn't be too difficult. I can have a look at that this evening for you (in about three hours), if you would like (I'm busy right now).

**PicnicTutorials** · Nov 27, 2012 10:06

Cool - cool. So the first part should just look like this to make it start in 10 seconds...

function {
t.wiggle();
setTimeout(function(){t.wiggle('stop')},1000)
}

Or remove that whole block so it begins at (document).ready? And yes please. If you could take a look at that tonight that would be very helpful. Thanks for help thus far!

**Pullo** · Nov 27, 2012 10:11

Hey,

The code would then look like this:

Code JavaScript:

function wiggleForOneSecond(t){
  t.wiggle();
  setTimeout(function(){t.wiggle('stop')},1000)
}
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},61000)
});

**PicnicTutorials** · Nov 27, 2012 11:27

Originally Posted by Pullo

Hey,

The code would then look like this:

Code JavaScript:

function wiggleForOneSecond(t){
  t.wiggle();
  setTimeout(function(){t.wiggle('stop')},1000)
}
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},61000)
});

No worries if your busy. That last snippet runs it for 10 seconds or so on page load - then waits 10 seconds - then runs for 1 second ever 10 seconds. As you know I'm looking for it to not run for 10 seconds after page load - then run for 1 second every 10 seconds for 1 minute - or maybe 30 seconds. So it runs three intervals. Dont want to pester the user.

**Pullo** · Nov 27, 2012 12:46

Hi there,

Back with you.

Originally Posted by EricWatson

That last snippet runs it for 10 seconds or so on page load - then waits 10 seconds - then runs for 1 second ever 10 seconds.

Then something is not correct.

Here is the updated code.
The wiggle should only kick in after 10 seconds and if you hover over the picture, the effect will be cancelled altogether.

Code JavaScript:

function wiggleForOneSecond(t){
  t.wiggle();
  setTimeout(function(){t.wiggle('stop')},1000)
}
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},61000)
 
  thingToWiggle.hover(function(){
    window.clearInterval(s)
  });
});

Would be nice if you could let me know if this works for you.

**PicnicTutorials** · Nov 27, 2012 12:54

I sure will. Ill be back at my computer tonight to test. Thanks so much.

Very kind of you!

**PicnicTutorials** · Nov 27, 2012 16:22

Ok I just tested it on my iPad using Textastic app. And unfortunately it does the same as the last. On page load it wiggles for 10 secs - stops for 10 - then wiggles for 1 and stops for 10. Any thoughts? Thanks!

Code JavaScript:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/*!
 * jQuery Wiggle
 * [url]http://www.userdot.net/#!/jquery[/url]
 *
 * Copyright 2011, UserDot [url]www.userdot.net[/url]
 * Licensed under the GPL Version 3 license.
 * Version 1.0.0
 *
 */
(function($) {
    $.fn.wiggle = function(method, options) {
        options = $.extend({
            degrees: ['2','4','2','0','-2','-4','-2','0'],
            delay: 35,
            limit: null,
            randomStart: true,
            onWiggle: function(o) {},
            onWiggleStart: function(o) {},
            onWiggleStop: function(o) {}
        }, options);
        var methods = {
            wiggle: function(o, step){
                if (step === undefined) {
                    step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                }
                if (!$(o).hasClass('wiggling')) {
                    $(o).addClass('wiggling');
                }
                var degree = options.degrees[step];
                $(o).css({
                    '-webkit-transform': 'rotate(' + degree + 'deg)',
                    '-moz-transform': 'rotate(' + degree + 'deg)',
                    '-o-transform': 'rotate(' + degree + 'deg)',
                    '-sand-transform': 'rotate(' + degree + 'deg)',
                    'transform': 'rotate(' + degree + 'deg)'
                });
                if (step == (options.degrees.length - 1)) {
                    step = 0;
                    if ($(o).data('wiggles') === undefined) {
                        $(o).data('wiggles', 1);
                    }
                    else {
                        $(o).data('wiggles', $(o).data('wiggles') + 1);
                    }
                    options.onWiggle(o);
                }
                if (options.limit && $(o).data('wiggles') == options.limit) {
                    return methods.stop(o);
                }
                o.timeout = setTimeout(function() {
                    methods.wiggle(o, step + 1);
                }, options.delay);
            },
            stop: function(o) {
                $(o).data('wiggles', 0);
                $(o).css({
                    '-webkit-transform': 'rotate(0deg)',
                    '-moz-transform': 'rotate(0deg)',
                    '-o-transform': 'rotate(0deg)',
                    '-sand-transform': 'rotate(0deg)',
                    'transform': 'rotate(0deg)'
                });
                if ($(o).hasClass('wiggling')) {
                    $(o).removeClass('wiggling');
                }
                clearTimeout(o.timeout);
                o.timeout = null;
                options.onWiggleStop(o);
            },
            isWiggling: function(o) {
                return !o.timeout ? false : true;
            }
        };
        if (method == 'isWiggling' && this.length == 1) {
            return methods.isWiggling(this[0]);
        }
        this.each(function() {
            if ((method == 'start' || method === undefined) && !this.timeout) {
                methods.wiggle(this);
                options.onWiggleStart(this);
            }
            else if (method == 'stop') {
                methods.stop(this);
            }
        });
        return this;
    }
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
   $('.wiggle').wiggle();
});
 
function wiggleForOneSecond(t){
  t.wiggle();
  setTimeout(function(){t.wiggle('stop')},1000)
}
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},61000)
 
  thingToWiggle.hover(function(){
    window.clearInterval(s)
  });
});
</script> 
 
</head>
<body>
 
<img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle wiggling" style="-webkit-transform: rotate(4deg); ">
 
 
</body>

**Pullo** · Nov 27, 2012 16:24

Strange, it works fine in Chrome.
Let me upload a copy somewhere and test it on my iPad.
Hang on!

**Pullo** · Nov 27, 2012 16:28

Hi, it works fine on the iPad for me.

Here's the complete code for you to copy and paste.
Does that work for you?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/*!
 * jQuery Wiggle
 * http://www.userdot.net/#!/jquery
 *
 * Copyright 2011, UserDot www.userdot.net
 * Licensed under the GPL Version 3 license.
 * Version 1.0.0
 *
 * http://www.class.pm/files/jquery/jquery.wiggle/demo/
 */
(function($) {
    $.fn.wiggle = function(method, options) {
        options = $.extend({
            degrees: ['2','4','2','0','-2','-4','-2','0'],
            delay: 35,
            limit: null,
            randomStart: true,
            onWiggle: function(o) {},
            onWiggleStart: function(o) {},
            onWiggleStop: function(o) {}
        }, options);
        var methods = {
            wiggle: function(o, step){
                if (step === undefined) {
                    step = options.randomStart ? Math.floor(Math.random() * options.degrees.length) : 0;
                }
                if (!$(o).hasClass('wiggling')) {
                    $(o).addClass('wiggling');
                }
                var degree = options.degrees[step];
                $(o).css({
                    '-webkit-transform': 'rotate(' + degree + 'deg)',
                    '-moz-transform': 'rotate(' + degree + 'deg)',
                    '-o-transform': 'rotate(' + degree + 'deg)',
                    '-sand-transform': 'rotate(' + degree + 'deg)',
                    'transform': 'rotate(' + degree + 'deg)'
                });
                if (step == (options.degrees.length - 1)) {
                    step = 0;
                    if ($(o).data('wiggles') === undefined) {
                        $(o).data('wiggles', 1);
                    }
                    else {
                        $(o).data('wiggles', $(o).data('wiggles') + 1);
                    }
                    options.onWiggle(o);
                }
                if (options.limit && $(o).data('wiggles') == options.limit) {
                    return methods.stop(o);
                }
                o.timeout = setTimeout(function() {
                    methods.wiggle(o, step + 1);
                }, options.delay);
            },
            stop: function(o) {
                $(o).data('wiggles', 0);
                $(o).css({
                    '-webkit-transform': 'rotate(0deg)',
                    '-moz-transform': 'rotate(0deg)',
                    '-o-transform': 'rotate(0deg)',
                    '-sand-transform': 'rotate(0deg)',
                    'transform': 'rotate(0deg)'
                });
                if ($(o).hasClass('wiggling')) {
                    $(o).removeClass('wiggling');
                }
                clearTimeout(o.timeout);
                o.timeout = null;
                options.onWiggleStop(o);
            },
            isWiggling: function(o) {
                return !o.timeout ? false : true;
            }
        };
        if (method == 'isWiggling' && this.length == 1) {
            return methods.isWiggling(this[0]);
        }
        this.each(function() {
            if ((method == 'start' || method === undefined) && !this.timeout) {
                methods.wiggle(this);
                options.onWiggleStart(this);
            }
            else if (method == 'stop') {
                methods.stop(this);
            }
        });
        return this;
    }
})(jQuery);
</script>
<script type="text/javascript">
  function wiggleForOneSecond(t){
    t.wiggle();
    setTimeout(function(){t.wiggle('stop')},1000)
  }
  
  $(document).ready(function(){
    var thingToWiggle = $('.wiggle');
    var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
    setTimeout(function(){window.clearInterval(s)},61000)
    
    thingToWiggle.hover(function(){
      window.clearInterval(s)
    });
  });
</script> 
</head>
<body>

<img src="http://www.visibilityinherit.com/code/images/adriana.jpg" class="wiggle">

</body>
</html>

**Pullo** · Nov 27, 2012 16:32

Hi again,
Just seen the problem (I probably should've checked out your code first).
You have two $(document).ready(function(){}) blocks.
Use the code that I just posted and I'm pretty confident it'll work as expected.

I'm off to bed now. It's late here.

**PicnicTutorials** · Nov 27, 2012 16:38

Yes that work perfect!!!

I am in your debt Sr. Thank you very much. I will put this to good use. Happy happy

**PicnicTutorials** · Nov 27, 2012 16:44

One last question? Trying to understand that math. If I wanted to say only run it for 30 seconds. In other words I wanted only three wiggles per page load each ten seconds apart. Would it be 31000 milliseconds? Basically are the run times (1000 milliseconds) and wait times (10000) part of that 31000? In which case it would be 33000 + the 10 second initial wait so 43000 or no? Thanks.

**ralph.m** · Nov 27, 2012 17:31

Interestingly, this question came up just a few weeks ago, and a CSS3 solution was also noted:

http://css3ps.com/

**Pullo** · Nov 28, 2012 06:29

Originally Posted by ralph.m

Interestingly, this question came up just a few weeks ago, and a CSS3 solution was also noted: http://css3ps.com/

Thanks Ralph, that's an interesting link. It's amazing what can be done with CSS these days.

Originally Posted by EricWatson

One last question? Trying to understand that math. If I wanted to say only run it for 30 seconds. In other words I wanted only three wiggles per page load each ten seconds apart. Would it be 31000 milliseconds? Basically are the run times (1000 milliseconds) and wait times (10000) part of that 31000? In which case it would be 33000 + the 10 second initial wait so 43000 or no? Thanks.

The way the code works is to use the setInterval() method to repeat the wiggle every ten seconds.
As you are probably aware, setInterval() calls a function or evaluates an expression at specified intervals (in milliseconds) and it will continue calling the function until clearInterval() is called, or the window is closed.
Therefore if you want three wiggles, one will take place after ten seconds, the second one after twenty seconds and the third one after thirty seconds, so you need to call clearInterval() any time after the third wiggle has taken place, but before the fourth wiggle. In my example I called it one second later, but you could also call it two, three, four etc ... seconds later with the same effect.

The amended code would look like this:

Code JavaScript:

function wiggleForOneSecond(t){
    t.wiggle();
    setTimeout(function(){t.wiggle('stop')},1000)
  }
 
$(document).ready(function(){
  var thingToWiggle = $('.wiggle');
  var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
  setTimeout(function(){window.clearInterval(s)},31000)
 
  thingToWiggle.hover(function(){
    window.clearInterval(s)
  });
});

Does that make sense?

**PicnicTutorials** · Nov 28, 2012 06:50

Perfect sense!

User Tag List

Thread: need some help getting jQuery Wiggle Plugin working correctly?

Thread Tools

Display

need some help getting jQuery Wiggle Plugin working correctly?

Bookmarks

Bookmarks

Posting Permissions