Trying to make an image rotate using jquery

Question

I'm working on making an image rotate, and my console tells me that there are no errors with my javascripts, but the image doesn't rotate when I mouseover. Here are the file contents:

under myjavascripts.js

   $("#image").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:180})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

    });

and under my index.erb

<head>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript" src="/javascripts/myjavascript.js"></script>
... 
<img border="0" src="/images/transparent_drapes.jpg" alt="drapes" width="" height="" id="image">
  </div>

Are you doing this on document ready? Your image must be loaded for this to work, right? — Alex Shilman
– Alex Shilman, Commented May 15, 2014 at 18:19
@AlexShilman I'm not sure what you mean? I'm using Sinatra and have the image loaded in my images folder. Does that answer your question? — maudulus
– maudulus, Commented May 15, 2014 at 18:21

the Tin Man · Accepted Answer · 2014-05-15 19:40:01Z

4

You need to wrap your code in document ready, because your image has to be loaded onto the page before the events get to register. $(function(){}) like this:

 $(function(){
   $("#image").rotate({ 
   bind: 
  { 
    mouseover : function() { 
        $(this).rotate({animateTo:180})
    },
    mouseout : function() { 
        $(this).rotate({animateTo:0})
    }
   } 

  });
  });

DEMO

edited May 15, 2014 at 19:40

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered May 15, 2014 at 18:26

Alex Shilman

1,5471 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

maudulus Over a year ago

Fantastic! It was the first part that did it ($(function(){), and some other modifications...

Cereal Over a year ago

The way you responded makes me think you don't know what $(function(){} does. It's equivalent to $(document).ready(function() {});. Basically, it's an event handler that fires when the web page has finished loading in all the assets and whatnot.

Alex Shilman Over a year ago

@Cereal, thats exactly my point. Image is a part of the document, so when the document is ready, meaning the DOM, register the function mouseover, rotate...Which part of my answer gave you that impression?

Cereal Over a year ago

@AlexShilman Sorry, I was responding to modulus. Your answer was great. It was his "It was the first part that did it" comment that kind of implied he didn't have a clue what it did, just that it worked.

Rock Rathore · Accepted Answer · 2014-05-15 18:21:15Z

3

why using jquery while it can be done with some CSS3

CSS

.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

and on hover use this

.rotate:hover  
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

Then just attach the class “rotate” with any image or text to rotate it 360 degree.

Source : http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html

answered May 15, 2014 at 18:21

Rock Rathore

4052 gold badges6 silver badges14 bronze badges

1 Comment

maudulus Over a year ago

I am just practicing my jQuery and want to do this without CSS, but I appreciate your answer and may end up using this later.

acre · Accepted Answer · 2014-12-23 08:12:04Z

1

.rotate img {
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.rotate img:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
 }

DEMO Growth pages

edited Dec 23, 2014 at 8:12

answered Sep 26, 2014 at 12:03

acre

711 silver badge2 bronze badges

Collectives™ on Stack Overflow

Trying to make an image rotate using jquery

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related