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

@Octopusの答えは（もう？） 機能しています。まず、アニメーションは非同期であるため、任意の順序で起動する可能性があるため、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)
            })
    })
于 2015-10-08T12:45:58.680 に答える
1

Heres a wiggle function without a plugin. Just jquery... 

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

Call it like this:

wiggle('#myelement');
于 2013-09-30T03:32:40.180 に答える