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.
Related
When the page loads, I have hidden a div using
#hidDiv{
visibility: hidden;
}
I use jQuery to make it visible.
$('#hidDiv').css('visibility', 'visible');
My question is how do I make it fade in gently instead of appearing quickly?
Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;
If you don't want to use JQuery,
html:
<div id="theElement" class="hide"></div>
css:
.hide {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.show {
opacity: 1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
*1s is the number of seconds to fade for. Make sure you change all of them.
You can then just change the class with javascript:
document.getElementById('theElement').className = 'show'; // Fade in
document.getElementById('theElement').className = 'hide'; // Fade out
More Reading:
Simple documentation from W3Schools
More thorough documentation from MDN
Compatibility info from caniuse.com
Use jQuery fadeIn()
$('div').fadeIn();
Otherwise, if visibility must be maintained, do
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
div{
width:100px;
height:100px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
See Want to use jquery fade in effects, but want to use visibility:hidden initially
As AmmarCSE has stated, if you are using jQuery you can use $("div").fadeIn(); for more control you can also set a timeframe using fadeIn's first argument. ie
$("div").fadeIn("slow");.
This first argument can be one of the built in time values of "fast" or "slow" etc or it can be a time in milliseconds ie
$("div").fadeIn(1000);
The function also has a callback in case you want to do something once the element has finished fading in. It can be used like so...
$("div").fadeIn("slow",function(){
console.log("finished fading in");
});
You can also use fadeOut() in the same manner to fade the div back out... $("div").fadeOut("slow");
The docs on fadeIn() can be found here -> http://api.jquery.com/fadein/
Another option would be to use jQuery's animate() function on the elements opacity. Ie.
$("div").animate({
opacity:0
},"slow");
This is useful if you also want to animate other properties of the element at the same time. ie.
$("div").animate({
opacity:0,
left:200
},"slow");
The docs for animate() can be found here -> http://api.jquery.com/animate/
Another option would to use css transitions like so...
div {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity:1s;
}
div.fadeIn {
opacity:1;
}
And then use jquery to add or remove the fadeIn class to trigger the fading ie.
$("body").on("click",function(){
$("div").toggleClass("fadeIn");
});
This will fade the div in or out on click of the body.
More info on transitions here -> http://www.w3schools.com/css/css3_transitions.asp
You could also use css animations but I wont go into that here. Hope the extra info helps someone.
I am using impress.js for the first time and wanted to make a tweak. The original demo SEEN HERE has the slides become dim/transparent when they are not active. I have seen another impress.js presentation SEEN HERE where the image/slides remain opaque throughout the presentation except on the first slide (after that everything become opaque). How can I make a particular slide or image stay opaque through out the presentation?
in your css adding
.future : { opacity: 1.0 !important;}
.past : { opacity: 1.0 !important;}
or editing impress-demo.css
.impress-enabled .step {
margin: 0;
opacity: 0.3; <--- CHANGE THIS
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
will change the opacity for different steps
Anyway, you can find the elements ,and choose the one u want and make a .css with jquery, for example:
$("body").find(".future")[0].css("opacity","1.0"); <-- This will change just the first future step found
Anyway, please read about css rules and specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
EDIT
I though u may also want to use :firs-child or :after (CSS selectors) will can also help you: http://quirksmode.org/css/selectors/firstchild.html
http://www.w3schools.com/cssref/sel_after.asp
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 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;
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...