javascript - How to make an element shake every 5 seconds? - Stack Overflow

admin管理员组

文章数量:1289832

I have an html with the following structure:

<li><a class="" href="?sort-by=popular">Barang Terpopuler</a></li>

How do I make this element shake (move left and right) every 5 seconds using jQuery? Is there a built in animation for this?

I have an html with the following structure:

<li><a class="" href="?sort-by=popular">Barang Terpopuler</a></li>

How do I make this element shake (move left and right) every 5 seconds using jQuery? Is there a built in animation for this?

• javascript
• jquery

Share Improve this question Follow edited Feb 3, 2014 at 9:56 Liath 10.2k1010 gold badges5454 silver badges8282 bronze badges asked Feb 3, 2014 at 9:54 aditadit 33.7k7272 gold badges234234 silver badges380380 bronze badges 3

• I don't think their is built in function but why not setInterval with jQuery animate. – Gaurav Commented Feb 3, 2014 at 9:57
• 1 You can use the Shake jQuery UI Effect, along with setInterval to get the desired effect! – palaѕн Commented Feb 3, 2014 at 10:02
• Did you update your question to include "move left and right"? I didn't see this first time round. Sorry! – James Hibbard Commented Feb 3, 2014 at 11:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Try the following:

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({
            "position" : "relative"
        });
        for (var x = 1; x <= 3; x++) {
            $(this).animate({
                left : -25
            }, 10).animate({
                left : 0
            }, 50).animate({
                left : 25
            }, 10).animate({
                left : 0
            }, 50);
        }
    });
    return this;
}
setInterval(function() {
    $('li').shake();
}, 5000); 

Fiddle

You can achieve this using a plugin, such as classyWiggle which offers a little more functionality than rolling your own (which might or might not be a good thing).

Once you have included the plugin, you give an element the class wiggle

<img class="wiggle" src="images/image1.jpg" />

Then you do:

$('.wiggle').wiggle();

The plugin has a number of options you can set:

degrees - an Array object which outlines the cycle of rotation for a wiggle increment.
delay - allows you to specify, in milliseconds, the delay between switching from one rotation degree to the next (see degrees). A higher number creates a slower "wiggle."
limit - allows you to specify the maximum number of wiggles.
randomStart - a boolean value which tells the plugin to start wiggling all matched elements at the same degree or a random one.
onWiggle - an event that is fired off with the end of each wiggle.
onWiggleStart - an event that is fired off when the wiggling effect first starts.
onWiggleStop - an event that is fired off when the wiggling effect is stopped.

As well as three methods you can call:

start() - starts the wiggle effect.
stop() - stops the wiggle effect.
isWiggling() - a method that can be used to determine if the matched element is currently "wiggling."

You might have it repeat every five seconds like so:

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

setInterval(function(){wiggleForOneSecond($('.wiggle'))},5000);

Fiddle

...an example using pure JS (not JQ);

html:

<li><a class="shakeit" href="?sort-by=popular">Barang Terpopuler</a></li>

JS:

var interval;
shakeit = function(element){
    element.style.display = "block";
    var x = -1;
    interval = setInterval(function(){
        if(x == -1){
            element.style.marginLeft = "5px";
        }else{
            switch(x){
                case 0 :
                    element.style.marginLeft = "-5px";
                break;
                case 1 :
                    element.style.marginLeft = "0px";
                    element.style.marginTop = "5px";
                break;
                case 2 :
                    element.style.marginTop = "-5px";
                break;
                default :
                    element.style.marginTop = "0px";
                    clearInterval(interval);
            }
        }
        x++;
    },50)    
}

shakeit(document.getElementsByClassName("shakeit")[0]);
setInterval(function(){
    shakeit(document.getElementsByClassName("shakeit")[0]);
},5000);

fiddler example: http://jsfiddle/fnx3a/1/

integrated with JQ:

$.fn.shakeit = function(obj){
    var interval;
    set = $.extend({
        time : 5000, //interval
        top : "3px", 
        bottom : "3px",
        left : "3px",
        right : "3px"
    }, obj);

    var shake = function(element){
        element.style.display = "block";
        var x = -1;
        interval = setInterval(function(){
            if(x == -1){
                element.style.marginLeft = set.right;
            }else{
                switch(x){
                    case 0 :
                        element.style.marginLeft = "-"+set.left;
                    break;
                    case 1 :
                        element.style.marginLeft = "0px";
                        element.style.marginTop = set.top;
                    break;
                    case 2 :
                        element.style.marginTop = "-"+set.bottom;
                    break;
                    default :
                        element.style.marginTop = "0px";
                        clearInterval(interval);
                }
            }
            x++;
        },50);
    }

    return $(this).each(function(i,el){            
            shake(el);
            setInterval(function(){
                shake(el);
            },set.time);
        });
}
$(".shakeit").shakeit();

fiddle http://jsfiddle/fnx3a/2/

:) enjoy

本文标签： javascriptHow to make an element shake every 5 secondsStack Overflow