I'm having a bit of a frustrating problem regarding fading out an element using jQuery after it has been faded in with CSS. I set up a CSS animation to fade in an element when the page loads using the following (I've also got the relevant browser prefixes included too, I'm using Stylus):
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
opacity: 0;
animation: fadein 500ms ease-in 1ms forwards;
}
My issue is that when an event handler is activated that runs the following, the fadeOut does not fade but instead skips straight to nothing:
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
I've been able to replicate the issue in this JSFiddle. Can anyone help me out? :) Thanks a lot!
I would say it's conflicting with the CSS you're using. jQuery is probably using other opacity related properties than what your CSS is. An all jQuery solution might be this:
CSS
.elem {
display: none;
}
jQuery
$('.elem').fadeIn(1000); // on page load, fade in with jQuery
$('#go').click(function(){
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related: Conflict between CSS transition and jQuery fade
I know you asked for FadeIn and FadeOut... here's your code with animate and opacity instead.
$('#go').click(function(){
$('.elem').css('animation','none').animate({
'opacity' : 0
},function(){
$('.elem').animate({
'opacity' : 1
});
});
});
It seems that the css-animation has higher precedence than the inline style that jQuery applies to the element when fadeOut is used. This means the animation's opacity : 1; overrides any opacity setting jQuery applies, up until jQuery sets the element to display:none;
You can do this to get around:
$('#go').click(function(){
$('.elem').css('animation','none').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related
I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.
$(document).ready(function(){
$('.lights').on('click', function (){
$('.day').fadeToggle(3000);
setTimeout(function() {$('.night').css('position: absolute');}, 3000);
});
});
is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.
here's the jsFiddle of my project:
https://jsfiddle.net/jsieb81/oue2fnr0/
You can add a class on click event and manage opacity in css with a transition. Like this :
(You don't need jQuery)
document.querySelector('.lights').addEventListener('click',function(){
document.querySelector('.day').classList.add('hide');
});
.hide {
opacity: 0;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
see this fiddle https://jsfiddle.net/oue2fnr0/9/
How can i put a logo and a loading image when a user open the website
when the user open the website the logo appear with a loading image than the home page appear after a certain moment like this website
http://www.theprofessionalslb.com/
and it possible to do that without using javascript or jquery only in css?
Yes, you can animate with pure CSS using the animate property.
For example, if you would want #img1 to show first, and #img2 to show after, you can set an animation-delay on your second image and make that equal to the animation-duration of your first:
#img1 {
...
animation-duration: 2s;
...
}
#img2 {
...
animation-delay: 2s;
...
}
Then in your animation you can animate e.g. the opacity property to simulate a fade-in effect.
More on CSS Animations here.
EDIT
I created a fiddle doing what you want.
For support in more browsers, please advice caniuse.com.
Use loader image and apply it to body. Show the image till page load and when page is ready remove the image.
jQuery( window ).load( function(){
//show the image here.
});
jQuery( document ).ready( function(){
//hide the image here.
});
The way they did it, it's handled by jQuery-Animations, something like this:
// Fade-In logo
$('#logo').fadeIn(2000, function() {
// When done, fade-in the slogan
$('#slogan').fadeIn(1400, function() {
// When this is done, wait 1s and then fade both out
$('#logo, #slogan').delay(1000).fadeOut(2000, function() {
// Finally fade-in the content
$('#content').fadeIn(2000);
});
});
});
The first argument of the fadeIn-method is the animation-time, the second argument is the callback-function, that gets executed after the animation is done. For more information see its documentation.
This technique assumes either, that your animated elements are either set to opacitiy: 0 in their CSS, or that you set them hidden in your JS:
$('#logo, #slogan, #content').fadeOut(0);
or:
$('#logo, #slogan, #content').hide();
You could also use plain CSS for this, where you would do something like this:
#logo, #slogan, #content {
opacity: 0;
}
#keyframes fadeInAndOut {
0% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
#logo {
animation-name: fadeInAndOut;
animation-duration: 6400ms;
}
#slogan {
animation-name: fadeInAndOut;
animation-duration: 4400ms;
animation-delay: 2000ms;
}
#content {
transition: opacity 2000ms ease-out 6400ms;
opacity: 1;
}
Please be aware that both examples are untested and should just give you an idea. You will probably need to also use the -webkit-keyframes prefixed version for the animation and also if you want the animation timings to be visually perfect, you'd need two separate fadeInAndOut-keyframes for both.
I'm using slideUp and slideDown to animate sections hiding and showing using AngularJS's ngShow. It works fine, but I'd much rather have slideLeft and slideRight. How would I go about recreating slideUp and slideDown for those?
slideUp automatically hides the the element and slideDown automatically shows it - how would I be able to configure this such that they hide and show when I want then to? e.g.:
$(element).slideLeftAndHide();
$(element).slideLeftAndShow();
As opposed to
$(element).slideUp(); // $element.slideUpAndHide();
You can use the following to achieve this:
$('#element').show("slide", { direction: "left" }, "fast");
Since you tagged Angular.js, I assume you're also using Angular. You should prefer using something like ng-class instead of literally showing and hiding elements with jQuery. This is a good, modular way to do what you want using existing Angular.js capabilities and fast CSS animations.
I also assume that you're doing the show/hide part in response to some sort of conditional value changing, is that right?
If so, to start off:
1. When the conditional value changes, let the DOM know by adding a class name when a condition turns true.
<div ng-class="{showing: myDataFinallyLoaded}">...</div>
In this case, if myDataFinallyLoaded is true, the div has a showing class attached.
2. When the div has a showing class name attached, animate it into view.
div {
transform: translate(-100%) scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
div.showing {
/* Any CSS rules can go in here! */
transform: translate(0px) scale(1);
opacity: 1;
}
3. When your condition becomes true, update the scope.
someRandomAPI.loadEverything().then(function() {
$scope.myDataFinallyLoaded = true;
});
I have written a small amount of code to try and replicate jQuery's .fadeIn() and .fadeOut() functions using CSS transitions to look better on touch devices.
Ideally I'd like to avoid using a library so that I can write exactly what I want, and as a learning exercise.
fadeOut works well.
The idea for fadeIn is to use CSS3 transitions to adjust the opacity of an element, after which the element will be set to display:block; (using is-hidden class) to ensure it's not still clickable or covering something beneath it.
fadeIn is not working though. I think it is due to adding the is-animating class at the same time as removing the is-hiding class. The transitionEnd event never fires because a transition does not occur:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
$elem.removeClass('is-hiding');
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
And the CSS
.is-animating {
#include transition(all 2000ms);
}
.is-hiding {
// Will transition
#include opacity(0);
}
.is-hidden {
// Won't transition
display: none;
}
Here's the code: CodePen link
Update: I have found what I'd describe as a hack, but that works very well: CSS3 replacement for jQuery.fadeIn and fadeOut
Working code after this fix: Fixed
A solution without setTimeout would be very valuable though.
i don't know what you really wanna achieve but if your using css3 your using a modern browser. in that case pure css & javascript is a better solution.
it's all about how you write the css transition.
here is the js code
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
this.classList.add('hide');
},false);
div.addEventListener('webkitTransitionEnd',function(e){
console.log(e.propertyName);
},false);
btn.addEventListener('click',function(e){
div.classList.toggle('hide');
},false);
css code
div{
width:200px;height:200px;
opacity:1;
overflow:hidden;
line-height:200px;
text-align:center;
background-color:green;
-webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
height:0px;
opacity:0;
-webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
/*add the various -moz -ms .. prefixes for more support*/
}
and the html
some text
<div>click here</div>
some text
<button>toggle</button>
here is an example.
http://jsfiddle.net/qQM5F/1/
Alternative solution using Keyframes
js
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('webkitAnimationEnd',function(e){
div.style.display=div.classList.contains('hide')?'none':'';
},false);
btn.addEventListener('click',function(e){
div.style.display='';
div.classList.toggle('hide');
},false);
css3
div{
background-color:green;
-webkit-animation:x 700ms ease 0ms 1 normal running;/*normal*/
opacity:1;
}
div.hide{
-webkit-animation:x 700ms ease 0ms 1 reverse running;/*reverse*/
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0;}
100%{opacity:1;}
}
example
http://jsfiddle.net/qQM5F/8/
here is a prototype
Object.defineProperty(HTMLElement.prototype,'toggleOpacity',{value:function(){
function check(e){
this.style.display=this.classList.contains('hide')?'none':'';
this.removeEventListener('webkitAnimationEnd',check,false);// clean up
}
this.addEventListener('webkitAnimationEnd',check,false);
this.style.display='';
this.classList.toggle('hide');
},writable:false,enumerable:false});
css
.fade{
-webkit-animation:x 700ms ease 0 1 normal;
opacity:1;
}
.fade.hide{
-webkit-animation:x 700ms ease 0 1 reverse;
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0}
100%{opacity:1}
}
usage
the element you need to fade needs a class fade then toggle it with
element.toggleOpacity();
example
http://jsfiddle.net/qQM5F/9/
You may want to consider a couple of plugins that might take care of what you want:
jQuery.transition.js retrofits the existing jQuery animation methods to use CSS transitions in browsers that support them.
Transit adds a transition function you can use to define your own transitions. It uses jQuery's effect queue, so you can queue up the changed display value to run after opacity has finished transitioning.
I have managed to fix this by doing something that feels unnatural and hacky:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
// Smelly, setTimeout fix
setTimeout(function () {
$elem.removeClass('is-hiding');
}, 0);
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
Adding the setTimeout function to the class that contains the transition-able property fixes the issue.
Working code here: Codepen fixed code
Looking for a way to do something like this.
Where when you click on a section it nicely transitions them.
Would it be a Jquery plug in or done with CSS?
You can do it with both jQuery and CSS, however the CSS support is a little worse than the jQuery-centric solution.
Try something like this for use with jQuery...
$('outerdiv').click(function() {
// `this` being the html element clicked on
$(this).fadeOut(function() { //After fadeOut completes,
$('.page-to-show').fadeIn(); //Fade in target page
});
});
Let me know if you need more advice on how to get this set up.
It looks like you want something along the lines of this plug-in: Quicksand
try this one.
Note:.cont stands for the name of the div or the body that u want to fade or something
.cont{
animation: transitionIn 2s;
}
#keyframes transitionIn{
from{
opacity: 0;
transform: rotateX(-10deg);
}
to{
opacity: 1;
transform: rotateX(0);
}
}