Question

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

当我将鼠标悬停在图像上时，我想完成此操作。我有以下html：

<div id="Background">
<br /><br />
    <div class="Menu">
       <div>
       <button class ="ButtonClass">Activities</button>
       <button class ="ButtonClass">Offers</button>
       <button class ="ButtonClass">Skills</button>
       </div>
    </div>
    <div id="Content">
    <h1>Activities</h1>

    <div id ="newsSection">


     <h4>
                <span class="subhead">Satan Kommer ej</span></h4>
            <p>
               !</p>
            <h4>
                <span class="subhead">Börjar den 14 December!</span></h4>
            <p>
           </p>
            <h4>
                <span class="subhead">2012 top </span></h4>

               <table id="theList">
                  <thead>
                  <tr>
                      <th>Namn</th>
                      <th>has</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td>Henrik</td>
                      <td>500k</td>
                  </tr>
                  <tr>
                      <td>Erik</td>
                      <td>450k</td>
                  </tr>
                  <tr>
                      <td>Samer</td>
                      <td>400K</td>
                  </tr>
                  <tr>
                      <td>Jakob</td>
                      <td>350K</td>
                  </tr>
                  <tr>
                      <td>Pontus</td>
                      <td>300k</td>
                  </tr>
                  <tr>
                      <td>Peder</td>
                      <td>250K</td>
                  </tr>
                  <tr>
                      <td>Chefen</td>
                      <td>200K</td>
                  </tr>
                  <tr>
                      <td>Johan</td>
                      <td>150K</td>
                  </tr>
                  <tr>
                      <td>Tania</td>
                      <td>100K</td>
                  </tr>
                  <tr>
                      <td>Perica</td>
                      <td>54K</td>
                  </tr>
                  </tbody>
                </table>   

    </div>
    <br />
    <h5>peps:</h5>    

    <div id="Consultants">

     <img src="/images/erik.jpg" alt="" width="70" height="70" float ="left" />
     <img src="/images/PONY.jpg" alt="" width="70" height="70" float ="left" />
     <img src="/images/peder.jpg" alt="" width="70" height="70" float ="left" />
     <img src="/images/sael.jpg" alt="" width="70" height="70" float ="left" />




    </div>

    </div> 
    </div>
    <br />

</body>
</html>

我有以下jquery代码：

$(function () {


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


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

    };
};

当我添加代码并按下“代码示例”按钮时，它似乎没有工作，所以我不得不这样抱歉。

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

jquery代码可能不是100％正确，但它更像是一个代码示例，以便您可以理解我要做的事情。我希望你能填补其余部分。

谢谢！

Answer 1

好的，因为你很沮丧，只需使用这个plugin：

这个插件只是简单地触发点击动画动画，因为你需要wiggle effect on a image when hovering因为你需要$('div#wigglewrapper img').hover(function(){ $(this).wiggle('start'); },function(){ $(this).wiggle('stop'); });所以只需使用hover功能，因此只需使用{{3}}功能：

{{1}}

希望有所帮助：）

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

@章鱼＆＃39;答案是（不再？）工作。首先，动画是异步的，因此它们可能以任何顺序触发，因此您必须在complete回调中嵌套后续动画，并且传递'-10px'设置绝对值，因此您需要{ {1}}。此外，'-=10px'不适用于所有元素（left也不是通用的，因此您可能需要进行实验）。

这是我对Octopus＆＃39;的快速而肮脏的改编。回答，当你需要一次功能时使用它并继续前进：

margin

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

3 个答案: