如何在图像悬停时创建摆动效果

Question

我试图在我的主页上的几张图片上创建一个摆动的效果！

当我把鼠标悬停在图像上时，我想完成这个任务。我有以下html：

我有以下jquery代码：

$(function () {


  $("#Consultants img").hover(wiggle, wiggle);


    function wiggle(evt) {
    $(this).wiggle()

    };
};

当我添加代码并按下“代码示例”按钮时，它似乎无法工作，所以我不得不这样做，对不起。

我的问题是，我已经在网上尝试了几个解决方案，但无法使它们工作，所以经过几个小时的尝试，我决定寻求帮助。

jquery代码可能不是100%正确的，但它更像是一个代码示例，这样您就可以理解我试图做的事情了。我希望你能把剩下的补上。

谢谢!

Answer 1

好吧，既然你很沮丧，只需使用这个插件

这个插件只是简单地触发扭动动画，在您的情况下单击一个元素(如图像)，但是由于您需要wiggle effect on a image when hovering，所以只需使用悬停函数，例如：

$('div#wigglewrapper img').hover(function(){
    $(this).wiggle('start');
},function(){
    $(this).wiggle('stop');
});

希望它有帮助:)

Answer 2

这是一个没有插件的扭动功能。只是jquery..。

var wiggle = function(myelement) {
  $(myelement)
    .animate({'left':(-10)+'px'},200)
    .animate({'left':(+20)+'px'},200)
    .animate({'left':(-10)+'px'},200);
 };

就这样说吧：

wiggle('#myelement');

Answer 3

@八达通的答案是(不再？)工作中。首先，动画是异步的，因此它们可能按任何顺序触发，因此必须在complete回调中嵌套后续动画，并传递'-10px'设置绝对值，因此需要'-=10px'。而且，left并不适用于所有元素( margin也不是通用的，因此您可能需要进行实验)。

以下是我快速而又肮脏的八达通回答，当你需要功能时使用它一次，然后继续前进：

var parent = $('your-selector');

parent.animate(
    {'margin-right' : '-=5px', 'margin-left' : '+=5px'},
    200,
    function() {
        parent.animate(
            {'margin-right' : '+=10px', 'margin-left' : '-=10px'},
            100,
            function() {
                parent.animate({'margin-right' : '-=5px', 'margin-left' : '+=5px'}, 200)
            })
    })