Javascript 如何使元素每5秒抖动一次？

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

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

如何使用jQuery使该元素每5秒抖动一次（向左和向右移动）？有内置动画吗？

请尝试以下操作：

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

jQuery.fn.shake=function（）{
这是每个功能（i）{
$（this.css）({
“位置”：“相对”
});
对于（var x=1；x您可以使用一个插件来实现这一点，例如它提供的功能比您自己的（这可能是一件好事，也可能不是一件好事）多一点

一旦包含了插件，就给元素类
wiggle

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

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

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

…使用纯JS（而非JQ）的示例

html:

小提琴手示例：

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

拨弄

：）享受
我不认为它们是内置的功能，但为什么不使用jQuery animate设置间隔。你可以使用，以及
setInterval
来获得想要的效果！你是否更新了你的问题以包括“向左和向右移动”？我第一次没有看到这个。抱歉！这正是我需要的
<li><a class="shakeit" href="?sort-by=popular">Barang Terpopuler</a></li>

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

$.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();