Domanda
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
https://stackoverflow.com/questions/23685748
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian $("#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>
Soluzione
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})
}
}
});
});
Altri suggerimenti
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
.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
