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=".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>
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./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 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 Commented May 15, 2014 at 18:21
- This isn't a Ruby question so I'm removing the tag. – the Tin Man Commented May 15, 2014 at 19:39
3 Answers
Reset to default 4You 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
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./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