2

I'm trying to create a wiggle effect on a few images on my homepage!

I want to accomplish this when I hoved the mouse over the image. I have the following 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>

I have the following jquery code:

$(function () {


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


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

    };
};

When I add the code and press the "code sample" button it did not seem to work so I had to have it like this sorry.

My problem is that I have tried several solutions online but could not make them work so after a few hours of trying I decided to ask for help.

the jquery code might not be 100% correct but it is more of a code sample so that you can understand what I am trying to do. I hope you can fill in the rest.

Thanks!

ThunD3eR
  • 3,216
  • 5
  • 50
  • 94
  • 1
    Simply put: there's no `$.wiggle()` function (unless you define it or import a plugin which does that). You'll need to define a [custom animation](http://api.jquery.com/animate/) to do the wiggling. – Mattias Buelens Jan 08 '13 at 14:18
  • Are you using a wiggle plugin? – CraigTeegarden Jan 08 '13 at 14:21
  • I am aware of that there is not wiggle() function in the jquery library. As i mentioned at the end of the question it is not correct it is a sample of code so that the kind genious who has greater knowledge than me can help me do this. I have tried several ways of solving this and i could not make it work and in many cases i did not even understand what they did. Thats why i left it like this. If someone has the time i need a answer that involves an entire aniimated plugin (with comments). I don´t want to come off as lazy but im really frustruated, ive been at this for several hours – ThunD3eR Jan 08 '13 at 14:29
  • 1
    @Ra3IDeN next time to avoid confustion put a comment in your code along the lines of `/*This is where I'm stuck*/` so that we know that this is where you need help\code and aren't left wondering if you are using a plug in or not. – Jon P Sep 30 '13 at 03:45
  • Try this - http://stackoverflow.com/a/4399433/934565 – Vintesh Jul 15 '15 at 16:09

3 Answers3

3

Ok since you're frustrated, just use this plugin:

This plugin just simple trigger the wiggle animation on click for an element such as image in your case but since you require wiggle effect on a image when hovering so just use hover function for example:

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

Hope it helps :)

Eli
  • 14,779
  • 5
  • 59
  • 77
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');
Octopus
  • 8,075
  • 5
  • 46
  • 66
  • Editted after the downvote. This works. I tested it. – Octopus Sep 15 '14 at 23:22
  • Better to have positions of -10, +10, and 0 since those are destinations and not movements. Also, for it to be smoother, double the second duration. – new name Jan 11 '15 at 17:04
1

@Octopus' answer is (no longer?) working. First of all, the animations are asynchronous, so they might fire in any order, so you have to nest the subsequent animations in the complete callbacks, and passing '-10px' sets the absolute value, so you need '-=10px'. Also, left does not work on all elements (neither is margin universal, so you might need to experiment).

Here's my quick and dirty adaptation from Octopus' answer, use it when you need the functionality once and move on:

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)
            })
    })
raveren
  • 17,799
  • 12
  • 70
  • 83