I noticed that whenever I try to use transform with a jQuery animation in the css section, it doesn't go off. It is the only property not working for me.
I am trying to use:
$(myElement).animate({
opacity: 1,
transform: "scale(1.5)"
}, 7000);
But the above code only passes the opacity animation, ignoring the transform.
One solution would be to use css for the animation and jquery to add the class that does the animation.
$(myElement).addClass("animate");
.animate {
transition: all 7s;
transform: scale(1.5);
}
Using the .animate() function, this would work.
$(myElement).animate({
height: ($(this).height()*1.5),
width: ($(this).width()*1.5)
}, 7000);
Related
i would like to make an images slide effect as this website :
https://www.hackages.io/
I don't know what is the exact name of the effect and If I can do it wiht Jquery / JavaScript or bootstrap ?
Thanks for helping me :D
They are not using any slider plugin or any js for this part.They are using css for this animation.Its a one image only and by using css
animation: collage 60s linear infinite;
#keyframe collage
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
main.faea32ab.css:5
100% {
-webkit-transform: translate3d(-1800px,0,0);
transform: translate3d(-1800px,0,0);
}
using above css they are achieve this slider.If you want to add slider so try to use crawler.js slider for same effect.
How can I use the transform: scale() css propriety in the .animate() function in jQuery?
This, here, doesn't work
$(document).ready(function(){
$('.circ1').animate({
transform: 'scale(1)'
}, 830);
});
When I apply a transition on an element with CSS, jQuery's .fadeOut() and .fadeIn() stop working.
I have a Solution for this but, why does this happen?
Why do .fadeOut() and .fadeIn() work like .hide() ?
Where have the effects gone while there is a css transition being applied?
When I have to apply any jQuery animation, I always remove the transition and then apply jQuery animation and then add the transition back!
Is there any other trick to do this? Or is this the only way?
cloned.css('transition', 'none');
cloned.fadeOut();
setTimeout(function(){
cloned.css('transition', 'all 500ms cubic-bezier(0.5, 0.1, 0.7, 1.5)');
});
fadeOut and fadeIn will work with transitions, so long as you are not setting the transition to effect changes in opacity.
Working Example
$('.div1').click(function () {
if ($('.div2').is(':visible')) {
$('.div2').fadeOut(3000);
$('.div2').css('height', '0px');
} else {
$('.div2').fadeIn(3000);
$('.div2').css('height', '400px');
}
});
.div1 {
height:20px;
width: 200px;
background: blue;
}
.div2 {
display:none;
height:100px;
width: 200px;
background: red;
transition: background-color 3s, height 3s;
}
Here's why this works:
The .fadeOut() method animates the opacity of the matched elements.
Once the opacity reaches 0, the display style property is set to none,
so the element no longer affects the layout of the page.
From the API Documentation
So, basically both fadeOut and fadeIn animate the opacity of the element, if you set transition: all or transition: opacity you're trying to run two different animations on the same property at the same time.
To work around this you can simply specify which properties you want the css transition to apply to.
Rather than using this:
.some_element {
transition: all 1s;
}
Use this:
.some_element {
transition: height 1s, background-color 1s, some_other_property 2s;
}
JQuery .fadeOut()/.fadeIn() will not work with Transition. Because CSS Transition equivalent to them. As they are equivalent, always the last option will be in action. If you want both try CSS animation property. This could help you-
http://jsfiddle.net/webdevron/9a79L/
Again if you want to use a jQuery function then write as bellow:
cloned.css('transition', 'none');
cloned.fadeOut( "slow", function() {
// Animation complete.
});
When I click on a button, I want a div to rotate, just as I would do with a CSS3 transition: rotate(350deg);. How would I do this with either CSS or JS? (If it can be done with CSS I'd perfer that instead)
In the onclick event of the button, put:
document.getElementById("yourDivId").className += " rotate";
In the CSS:
#yourDivId {
transition: transform 1s;
}
.rotate {
transform: rotate(360deg);
}
You'd have to add the browser specfic prefixes (-moz-, -webkit-) to the transition and transform, but this should work for you.
Does anyone know if jQuery can handle an animation like:
rgba(0,0,0,0.2) → rgba(0,255,0,0.4)
I know there is a plugin to handle color animations, but this might be too modern?
Using CSS3 animation (no javascript)
You can also achieve the same effect using CSS3 animation. See below,
Step 1: Create a keyframe for your animation
#keyframes color_up {
from {
background-color: rgba(0,0,0,0.2);
}
to {
background-color: rgba(0,255,0,0.4);
}
}
Step 2: Use the animation rules.
animation-name: color_up;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
DEMO: http://jsfiddle.net/2Dbrj/3/
Using jQuery
jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.
$(selector).animate({
backgroundColor: 'rgba(0,255,0,0.4)'
});
DEMO: http://jsfiddle.net/2Dbrj/2/
Uh, nevermind. Found an amazing modification to the jquery color plugin.
http://pioupioum.fr/sandbox/jquery-color/
use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)