Is it possible to show animations while javascript is running - javascript

I have a task to sort a list of elements, which includes animating them.
The code is something like this:
if(condition(first, next)) {
first.className = 'fadeOut';
// some manipulation of both elements
next.className = 'fadeIn';
The css is:
.element {
transition: all 1s ease-in 0s;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
and the transitions are
#keyframes fadeIn {to {opacity: 1;}}
#keyframes fadeOut {to {opacity: 0;}}
.fadeIn {opacity: 0;animation: fadeIn 2s ease-in 1 forwards;}
.fadeOut{opacity: 1;animation: fadeOut 2s ease-in 1 forwards;}
What I expect is to see the animation running on the first element, then the code being executed and then the animation on the second element. What I see in effect is the code runs and the elements get sorted but the animations are not triggered in the sequence.
I have tried adding timeouts to get each step to wait for the next, but that didn't help.
Can anyone tell me where I am going wrong? Is there a way to get the code to pause long enough for each animation to be visible?

Related

Setting and element's opacity and then animating it - all with JS

I am working on a new site that is using page transitions. The old content fades away and the new content fades in - at least that's what should happen.
When the new content is loaded, I use JS to set it's opacity: 0
this.newContainer.style.opacity = 0;
Then, I add a new class so I can use CSS transitions
this.newContainer.classList.add("animate-in");
This is the CSS for the .animate-in
.wrapper.animate-in {
opacity: 1;
visibility: visible;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
However, this doesn't work. The code doesn't animate the opacity from 0 to 1. Instead, it is animating backwards, from 1 to 0. It seems like the classList.add doesn't hear the previous line of code.
Anyone know how to fix this?
EDIT
OK, so I learned that using the JS style.opacity will completely override any opacity CSS rules. This is my problem. How do I get around this?
Try to use css animation and remove code--> this.newContainer.style.opacity = 0;
.wrapper.animate-in {
opacity: 1;
transition: all 1000ms ease-in-out;
animation: animate-in01 1s;
animation-iteration-count: 1;
}
#keyframes animate-in01{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

jQuery Rotate with slideToggle

I have a div that when you click on it opens up the the content within, at the top of the bar I have an arrow image that if the content is closed (default position) the arrow is pointing to the right and when the content is open I want the arrow image to rotate to pointing down.
I am using jQueryRotate to rotate the image and I have all the elements working, but what I can't get it to work when toggling, I can only get the image to rotate once when opening the content, I have where I have got to here
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
});
$("#ProductHeaderWrap1").click(function () {
$("#ProductHeaderWrap1").find(".arrow").rotate({
animateTo: 90
}, {
duration: 500
});
});
http://jsfiddle.net/cgF4a/ along with some worked on jQuery attempts, I just need the image to rotate to 0 when clicked to close the div.
Thanks for any help,
J.
It's easier to do this with CSS, take a look:
img.open {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
img {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
$(document).ready(function () {
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
$(this).find("#Image1").toggleClass("open");
});
});
Updated JSFiddle

Blinking a certain image

Hi I would like to blink an image. There is a demo here.
In my website it makes all the images blinking. I would like to blink only one certain image.
Do you have any idea how to do that?
Thanks.
If you inspect it, the blinking is in the css:
-moz-animation: blink normal 2s infinite ease-in-out;
-webkit-animation: blink normal 2s infinite ease-in-out;
-ms-animation: blink normal 2s infinite ease-in-out;
animation: blink normal 2s infinite ease-in-out;
we can provide blinking image illusion through javascript coding by changing the display property of the image to block / none with periodic time intervals...
however, this will increase load at the client side as we need a script to run continously to blink an image...
i would prefer to prepare a GIF blinking image and place it on the website... ( if the requirements permits)
In the tutorial, the effect is set to every image on the page, because the "img" selector selects every image on the page.
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}​
Use a class instead; replace img with .blink and add this class to your image:
<img src="..." class="blink" />
From the demo link that you have given, you can apply a class for images or multiple images that you want to blink or unblink.
Here is the Working fiddle for the same.
The HTML
<div>
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img class="abc" width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials.com/code/images/dont-blink.jpg">
<div>
The CSS:
#-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
#-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
#-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
#keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}​
img {
animation: 2s ease-in-out 0s normal none infinite blink;
border: 1px solid #000000;
transition: all 1s ease-in-out 0s;
}
img.abc {
animation: none;
transition: none;
}
So by default all the images are blinking, you just need to apply class .abc (from this example) to unblink the images that you do not want to blink and vice-versa.
Hope this Helps.
As seen here:
How do you make an image blink?
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}

jQuery on hover opacity

I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.
You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
​
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).
Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});​
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/
$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)
This works:
​$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});​

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.
Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);
Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}
something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);
You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}

Categories