I'm trying to use jQuery to rotate an image 90 degrees upon click on my div. Why doesn't it work?

Here's my HTML ...

<div class="class1">
    <div class="class2">
        <img id="whatever">
    </div>
</div>

.. and here's my jQuery ;

  jQuery(document).ready(function() {
       jQuery(".class1").click(function()
               {
            jQuery(this).find('img').rotate({animateTo:-90})
               });
             });

If it helps,

NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.

I'm trying to use jQuery to rotate an image 90 degrees upon click on my div. Why doesn't it work?

Here's my HTML ...

<div class="class1">
    <div class="class2">
        <img id="whatever">
    </div>
</div>

.. and here's my jQuery ;

  jQuery(document).ready(function() {
       jQuery(".class1").click(function()
               {
            jQuery(this).find('img').rotate({animateTo:-90})
               });
             });

If it helps, http://code.google./p/jqueryrotate/wiki/Examples

NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.

• javascript
• jquery
• function
• html
• selector

• Are you sure the rotate plugin is being loaded? What error does Chrome console or Firebug console show you? – Abdullah Jibaly Commented Apr 26, 2012 at 3:59
• I'm not sure as to how to check the Chrome console. Just checked it. Got this error: 'Uncaught TypeError: Object [object Object] has no method 'rotate' ' – Hugo Cornellier Commented Apr 26, 2012 at 4:02

5 Answers 5

According to @Abdullah Jibaly post and look at ment. I think you miss something like

<script src="http://jqueryrotate.googlecode./svn/trunk/jQueryRotate.js"></script>

And here is an example to rotate at first image http://jsfiddle/oamiamgod/BeUBF/2/

Your code looks fine as is, I'd guess that the plugin is not being loaded or something else outside the given context went wrong.

To get the first img you can use:

jQuery(this).find('img').first().rotate({animateTo:-90})

// according to use it

<div class="class1">
    <div class="class2">
        <img src="https://www.google./images/srpr/logo3w.png">
        <img src="https://www.google./images/srpr/logo3w.png" >
    </div>
</div>
        <button id='test'>click</button>

<script>
jQuery(document).ready(function() {
    var setvalue=90;
    jQuery("#test").click(function() {
        jQuery('.class1').find('img').rotate({
            animateTo: setvalue
        });
                setvalue=setvalue+90;        
    });
});
</script>

https://code.google./p/jqueryrotate/wiki/Examples

fisrt letter of class name should not be a number, change them to class1 and class2 instead and add quotation marks for animateTo value:

<div class="class1">
    <div class="class2">
        <img id="whatever">
    </div>
</div>

  $(document).ready(function() {
       $(".class1").click(function(){
            $(this).find('img').rotate({animateTo: "-90"})
       });
  });

try it

    <div class="class1">
        <div class="class2">
            <img id="whatever">
        </div>
    </div>


jQuery(document).ready(function() {
    jQuery(".class1").click(function()
    {
       $("#whatever").rotate(90);
    });
});