如何让元素每5秒钟震动一次？

Question

我有一个具有以下结构的html：

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

如何使用jQuery每5秒钟使这个元素抖动（左右移动）？ 这有内置动画吗？

Answer 1

请尝试以下方法：

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); 

小提琴

Answer 2

你可以使用一个插件实现这一点，例如classyWiggle ，它提供的功能比滚动你自己的更多（这可能是也可能不是一件好事）。

一旦你包含了这个插件，你就会给类一个元素wiggle

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

然后你做：

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

该插件有许多可以设置的选项：

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.

除了可以调用的三种方法：

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

您可能会每隔五秒重复一次，如下所示：

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

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

小提琴

Answer 3

......使用纯JS（不是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);

提琴手示例： http ： //jsfiddle.net/fnx3a/1/

与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();

小提琴http://jsfiddle.net/fnx3a/2/

：） 请享用