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>
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
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
Related
I am building an overlay with simple transform mocking slide-down effect. I works fine in Chrome and Safari, but it doesn't work in Firefox and i don't know why.
Here is my css:
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($off-canvas-bg, 0.95);
z-index: 99;
overflow: auto;
}
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
and html:
<div class="overlay overlay-slidedown">
</div>
I am adding open class with javascript:
toggleMenu: function ( ) {
var overlay = this.$('.overlay');
if( overlay && overlay.hasClass('open') ) {
overlay.removeClass('open')
}
else if(overlay){
overlay.addClass('open')
}
},
Try adding this to .overlay
transform-style: preserve-3d;
Quite often when FF transforms are not right, this is missing from the appropriate element. Webkit builds seem not to require this to establish the required stacking contexts, but Chrome/Safari suffer funny effects with the z-index on adjacent sibling elements in such cases.
I'm having issues while building my new website.
I have a mobile nav that shows up whenever your browser is small enough (I believe under 940px wide) and it works fine on Chrome and other webkit browsers, but in Firefox and IE the transitions don't work and nothing transforms the way I want it to. I'm not really sure why this is and could use help.
Here's a link to the site: http://teamreest.com/
EDIT: I am using the specific vendor prefixes, yet it still does not work.
More specifically relating to this:
.overlay{
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: $main-color;
overflow: auto;
z-index:100;
font-size:50px;
font-weight:300;
min-height:400px;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.overlay.show {
opacity:1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
Also this:
.container{
height:100%;
opacity: 1;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
}
.container.show {
opacity: 0.5;
-webkit-transform: translateX(30%);
-moz-transform: translateX(30%);
-ms-transform: translateX(30%);
transform: translateX(30%);
}
I found the issue in my code.
The transition as seen here:
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
And here:
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
Are problematic. As seen, the regular transition property has an issue.
That issue can be seen as there is a dash in front of the transform property of the transition. By removing this the problem is solved.
I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!
Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.
I am trying to add both flip and zoom effects, But I am able to achieve only one effect.
Use case is when I click on the Image the image will zoom, now i need to add the flip effect before the mouseleave the image.
Can anyone please help me out with the output using my code.
here it is what I have tried :
HTML
<div class="flip">
<div class = 'card'>
<img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
</div>
CSS
.zoom_img {
height: 250px;
width: 250px;
/* -moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in; */
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card .flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
Javascript
$(document).ready(function() {
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
$(this).removeClass('zoom_img_press');
});
});
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
});
});
Demo
Try this i think it will help you..
Class with multiple transform.
.zoom-flipper{
-moz-transform: scale(2.2) rotatex(-180deg);
-webkit-transform: scale(2.2) rotatex(-180deg);
-o-transform: scale(2.2) rotatex(-180deg);
transform: scale(2.2) rotatex(-180deg);
}
Corresponding Script:
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
$(this).removeClass('zoom-flipper');
});
});
Here is the Demo
Create two separate JavaScript functions then write jQuery code to manipulate the css for the image within the functions. JQuery css manipulation code example:
$(".className").css({"background-color":"black","font-size":"12px"});
You can set any css property within the curly brackets.
Then you can call the JavaScript functions on the elements DOM events. So the zoom function will be called with the onClick event and the flip function will be called on the onMouseOut event.
Right, I have a div with text in it, When I hover over the text it fades to red and has a margin left of 4px, It also has a image of a star next to it, what I want to achieve is to make the star spin when the text is hovered over but still have it turn red and have a margin left of 4px, any ideas?
Fiddle: http://jsfiddle.net/vPAcF/
CSS:
span.red:hover {
color:#C42626;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}
span.red:hover .star {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-0-transform: rotate(45deg);
transform: rotate(45deg);
}
.star {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transform: rotate(0deg);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.star:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
span.red {
color:#CCC;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}