I have this css which does a slide out transition
.slide_animation {
transition: 10s;
left: 0px !important;
-webkit-transition-duration:800ms
}
and using jquery:
$(".shop_look").click(function(){
$("#look").show();
$("#look").addClass("slide_animation");
$(this).fadeOut(2000);
})
this works but there is no easing when the #look element shows, its too snappy, I want it to ease out like a smooth animation. thanks
It doesn't look like you're using that correctly, the display property has only two states, so you should probably use the opacity property instead (or both) :
#look {
opacity:0;
-webkit-transition-duration:800ms;
}
#look.slide_animation {
opacity:1;
}
FIDDLE
If you don't want transitions on everything, you can specify the property as well:
transition-property: opacity;
Related
How do i add background transition to background-size if the code is following:
jsfiddle link for complete code : https://jsfiddle.net/3x4vhtj6/
div {
background-size: 100% auto;
}
div:hover {
background-size: auto 100%;
}
Updated
if This is not possible with the current version of css is their any other way to do this effect with js or jquery.
The transition property is what you're looking for. However, you need to use fixed values in order for the transition to work.
If you have no choice, you can still use jQuery in order to calculate the values and then add css properies using the jQuery .css() method.
For your use case, you could write something like this:
jQuery:
$('.my-div').css({ background-size: getBackgroundSize() });
CSS:
div.my-div {
transition: all 1s;
}
div.my-div:hover {
transition: all 1s;
}
So I'm using jQuery to change icons, and using CSS to apply a transition. For some reason its not working Here's my code
CSS
.fa-heart{
transition: 1s;
}
.fa-heart-o{
transition: 1s;
}
JS
$('.fa-heart-o').hover(function() {
$(this).toggleClass('fa-heart-o fa-heart');
}, function() {
$(this).toggleClass('fa-heart-o fa-heart');
});
A demo http://jsfiddle.net/cLVBg/1/ Any ideas?
content is not an animatable property, thus transition does not apply. However if you just want to fill in the heart with a transition in opacity, try working with a SVG- or CSS-created heart, or just place one on top of another and change their opacity value.
Example: http://jsfiddle.net/cLVBg/5/
What you are doing now is replacing the content on hover. If you want a slow transition, you can use CSS properties to achieve that, like so:
JSFiddle Example
HTML:
<div id="transition"></div>
CSS:
#transition {
width: 50px;
height: 50px;
background-color: blue;
}
#transition:hover {
transition: background-color 1s ease;
background-color: red;
}
The transition property requires that you declare another property to apply the transition to. You can select a duration, a transition timing function (ease, in this case), and a delay if you want.
I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?
The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space
There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.
I'm trying to animate the elements when they are filtered by javascript but the codes below don't work. Any suggestion?
This is what I have so far.
http://jsfiddle.net/ejkim2000/J7TF4/
$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");
$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});
On second thought, is there any other way that I can animate the elements by using css only?
I suggest you do it using CSS transitions. I believe this is what you're trying to do, but I can't find the referenced 'scaleDown' animation anywhere. My solution animates both width and height of the .item elements when toggling an additional '.hidden' class on them:
#ourHolder div.item.hidden {
transition: all 0.3s linear
}
#ourHolder div.item.hidden {
width: 0;
height: 0;
overflow: hidden;
}
Full solution on http://jsfiddle.net/5pKwy/
EDIT: Fiddle using min-height and min-width: http://jsfiddle.net/5pKwy/1/
I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?
jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO
.toggleClass() will not animate, you should go for slideToggle() or .animate() method.
You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}
I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.
You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});
Should have checked, Once I included the jQuery UI Library it worked fine and was animating...