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>
3 answers
solution1
4 ACCPTED 2014-05-15 18:26:46
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})
}
}
});
});
solution2
3 2014-05-15 18:21:15
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
solution3
1 2014-09-26 12:03:16
.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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.