I'm wondering how to add the 'Fade in/Fade out' effects to elements that I make appear or disappear with a responsive web site using CSS3 media queries. I've figured out how to use linear transitions, but would really like to use a fade.
To do this with CSS you will need to use transitions. The only way I can think to fade in/out an element with CSS transitions would be to set the opacity to zero and then animate the opacity back to one, but you can't do this with CSS alone (you would need some JS to time the events properly):
$(window).on('resize', function () {
if ($(this).width() <= 480) {
//do code for less than 480px wide
$('#some-element').css('opacity', 0).addClass('transition').css('opacity', 1);
setTimeout(function () {
$('#some-element').removeClass('transition');
}, 500);
}
}).trigger('resize');
Where the transition CSS class would have the transition rule set:
.transition {
-webkit-transition : opacity 0.5s linear;
-moz-transition : opacity 0.5s linear;
-ms-transition : opacity 0.5s linear;
-o-transition : opacity 0.5s linear;
transition : opacity 0.5s linear;
}
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 have two divs. One is currently 0% and the other 100%. With the click function, I transform them into 12% and 88%.
Works like charm, but I would like the "process" to be slow, and not instant. Like a small animation.
This is the code I have:
<script>
$(document).ready(function(){
$(".menu_logo").click(function(){
$(".right").css("width","88%");
$(".left").css("width","12%");
$(".menu_logo").css("display","none");
});
});
</script>
Use CSS transitions. Add the following properties to your .right and .left classes.
CSS
-webkit-transition: width 150ms linear;
o-transition: width 150ms linear;
transition: width 150ms linear;
To do this with jquery, you can use the following snip:
$("button").click(function() {$("div").animate({width:'350px'}, "slow")});
JSFiddle
Is it possible to prevent the caption of a bootstrap carousel from sliding with the background image, and instead, on 'slide' fade out, and on 'slid' the new caption fade in?
I prefer using the CSS-only solution:
.item.next .carousel-caption {
opacity: 0;
}
.carousel-caption {
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
It does rely on CSS3 transitions and does therefore not work in older browsers (for IE that means atleast version 10) but it's time to code for the future!
Use jQuery to attach functions to the 'slid' and 'slide' events...
$('#myCarousel').on('slide',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid',function(){
$('.carousel-caption').fadeIn(600);
})
Demo with animation: http://bootply.com/69740
For Bootstrap 3 it would be
$('#myCarousel').on('slide.bs.carousel',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid.bs.carousel',function(){
$('.carousel-caption').fadeIn(600);
})
This works... It still sort of slides with the carousel, but you do get the fadeOut and fadeIn affect.
$('#myCarousel').on('slide',function(){
$('#myCarousel .active .carousel-caption').fadeOut();
});
$('#myCarousel').on('slid',function(){
$('#myCarousel .active .carousel-caption').fadeIn();
});
Here is a fiddle demo.
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...
I want to make a background image disappear. It works.
But it fails when I try to delay it or to animate it.
Any guess what it's wrong and how to do it well?
$(function(){
$("#foto1").click(function() {
$("#foto1").delay(1000).animate.css({"background":"none"},2000);
});
})
http://jsfiddle.net/78W3u/
Tried like this
$(document).ready(function(){
$("#foto1").click(function() {
$(this).delay(1000).fadeOut(20000, function(){
$("#foto1").css('background', 'none') //<=== this remove the background after the animation stops
});
});
})
http://jsfiddle.net/78W3u/5/
This will fadeout an image : http://jsfiddle.net/2MQeC/
$(function(){
$("#foto1").click(function() {
$("#foto1").fadeOut(2000);
});
})
-- EDIT --
This will animate the background independently of the image : http://jsfiddle.net/2MQeC/1/
#foto1 {
background: black;
-webkit-transition: background 1.5s ease; /* Saf3.2+, Chrome */
-moz-transition: background 1.5s ease; /* FF4+ */
-ms-transition: background 1.5s ease; /* IE10 */
-o-transition: background 1.5s ease; /* Opera 10.5+ */
transition: background 1.5s ease;
}
$(function(){
$("#foto1").click(function(){
$this = $(this);
setTimeout(function(){
$this.css({
background: 'green'
});
}, 1000); // delay
});
});
As you can see, this rely on CSS3 transitions for background animation.
A better cross browser solution would be to use jQuery .animate() function.
But you can't modify as many properties as .css() could.
Extract from jQuery .animate() documentation :
Most properties that are non-numeric cannot be animated using basic
jQuery functionality (For example, width, height, or left can be
animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
However, you could change your markup and separate your image and your background in two div who are superimposed. This could simplify what you are trying to do.