2

我正在尝试在我的主页上的一些图像上创建摆动效果！

当我将鼠标悬停在图像上时，我想完成此操作。我有以下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% 正确，但它更像是一个代码示例，以便您了解我想要做什么。我希望你能填写剩下的。

谢谢！

4

3 回答 3

3

好吧，既然你很沮丧，就用这个插件：

在您的情况下，该插件只是简单地触发点击元素（例如图像）的摆动动画，但由于您需要wiggle effect on a image when hovering，因此只需使用悬停功能，例如：

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

希望能帮助到你 ：）

于 2013-01-08T14:36:50.963 回答
1

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

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

像这样称呼它：

wiggle('#myelement');
于 2013-09-30T03:32:40.180 回答
1

@Octopus 的答案（不再？）有效。首先，动画是异步的，所以它们可能以任何顺序触发，所以你必须在complete回调中嵌套后续动画，并传递'-10px'设置绝对值，所以你需要'-=10px'. 此外，left不适用于所有元素（两者都不是margin通用的，因此您可能需要进行实验）。

这是我对 Octopus 答案的快速而肮脏的改编，当您需要该功能时使用它并继续前进：

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)
            })
    })
于 2015-10-08T12:45:58.680 回答