We Keep Coding

How to apply animations on two elements at once with animated.css

I am working on a simple slideshow where each slide has its own duration.
I would like to add transitions between the slides using animate.css by adding and removing classes on the current and the next slides.
My problem is that - with my current approach - only the next slide will be animated (it slides in) but the current one is just disappear without any animation.
I have tried to detect the end of the current animation and then change(adding/removing) the classes but in that case there was a huge gap between the slides...
How can make sure that two animations plays at once?`
var slides = $this.find('.slide');
slideIt = function(time) {
setTimeout(function() {
var duration = slides.eq(nextSlide).data('duration');
slides.eq(currentSlide)
.removeClass(animateIn)
.addClass(animateOut)
.hide();
slides.eq(nextSlide)
.removeClass(animateOut)
.addClass(animateIn)
.show();
slideIt(duration);
currentSlide = nextSlide; nextSlide ++;
if (nextSlide == slidesLength) { nextSlide = 0;}
},time);
};
Thank you for the help in advance!
Ps.: While typing this post I have realized that it must be the .hide() but without it only the first slide displayed.

Native CSS animations on two different elements should always run at the same time.
But if you hide an element, it disappears before the animation has even started. You have to add a timer for that.
slides.eq(currentSlide)
.removeClass(animateIn)
.addClass(animateOut);
// save the jQuery instance of the element that should be hidden.
var $currentSlide = slides.eq(currentSlide);
// hide this element later
setTimeout(function() {
$currentSlide.hide();
}, 1000); // 1000 for 1000ms, replace that with the duration of the animateOut animation

If my first answer doesn't satisfy you, because you want so solve that on the CSS side, when there is a second way:
Remove the .hide() in JavaScript.
Make sure your CSS animation ends with a state, there the element cannot be seen anymore (like transform: scale(0) or left: -100%).
Maintain that final state of the CSS animation. To do that, see: Maintaining the final state at end of a CSS3 animation

HTML5 video how can i zoom at particular time while playing to particular position and come back to normal automatically

I have a video and i need to zoom at particular point (top-left) at particular time suppose exactly at 10 seconds so i need a smooth transition of moving up and coming back to its original position automatically

video.addEventListener("timeupdate", function(){
// check whether we have passed 5 minutes,
// current time is given in seconds
if(this.currentTime >= 10) {
//do something
document.getElementById("mainvideo").style.height='400px';
}
});
You can try addEventListener and checking current status making changes in dom

jQuery slider with setInterval not working correctly with fadeIn on pageload

I am trying to create a very simple jQuery based slider with fadeIn on pageload. But i have problems with the cycling of the script after the first time.
Here is my JavaScript code:
function slideShow(isFirst) {
if(isFirst) {
$('#slider_img_1').delay(1500);
}
$('#slider_img_1').fadeIn(2000).delay(1000).fadeOut(2000); // 6500
$('#slider_img_2').delay(5500).fadeIn(2000).delay(1000).fadeOut(2000); // 10500
$('#slider_img_3').delay(9500).fadeIn(2000).delay(1000).fadeOut(2000); // 14500
}
$(document).ready(function() {
slideShow(true);
setInterval("slideShow(false)",14500);
});
As you can see i simply add a delay to img_1 for the first cycle. In the second cycle i loop through the slideshow again with the same duration as the total cycle should take.
But something goes wrong when the interval starts, first with a gap then very widespread delays.
Based on Arun's fiddle: https://jsfiddle.net/h2jwqhom/2/

Instead of trying to synchronize separate intervals, it's probably easier to work slide by slide. This can be accomplished by getting the next slide on each run:
var sliders = $('.slider_img') //obtain slide collection
, cur = 0; //indexer for slides
function slideShow() {
var $slider = $(sliders[cur++]); //get slide to show
if(cur>=sliders.length) cur=0; //check if next slide is within bounds
$slider.fadeIn(2000).delay(1000).fadeOut(2000); //animate
setTimeout(slideShow,3500); //start next slide before fadeOut finishes
}
$(document).ready(function () {
setTimeout(slideShow, 1500); //start slideshow after 1500 msecs
});
fiddle
As a side note, if it would be ok to let the fadeout finish completely, you could simply do $slider.fadeIn(2000).delay(1000).fadeOut(2000, slideShow); instead of using setTimeout, but I reckoned your goal was to transition without fading out completely.

Javascript setInterval taking too long to reset

Hey I have a panel (br_Panel) that contains four divs with the class 'smallPanel' and id br_Panel1, br_Panel2, etc that are of the same and equal size and positioned overlapping each other. When the function runs, every 5 seconds one fades out and shows the one below, and when they have all faded out they all come back with the fadeIn. The problem is the pause between the last div's fadeout and the fadein for all of them is 15 seconds, three times as long as it takes each div to leave. How can I reduce this pause in reset time to 5 seconds?
setInterval(function() {
if(i < 0) {
$('#br_Panel').find($('.smallPanel')).fadeIn();
i = 5;
}
else
i--;
$('#br_Panel').find($('#br_Panel' + i)).fadeOut();
}, 5000);
This is the html (if it helps, each of the innermost divs is positioned absolute to #br_Panel so that they overlap each other):
<div class="height1 panel" id="br_Panel">
<div class="smallPanel" id="br_Panel1">content</div>
<div class="smallPanel" id="br_Panel2">content</div>
<div class="smallPanel" id="br_Panel3">content</div>
<div class="smallPanel" id="br_Panel4">content</div>
</div>

You mentioned that your br_Panel contains four divs with the class smallPanel, but your interval function will run six times before i is reset (5, 4, 3, 2, 1, 0). It may be that your function is running 2 more times than needed, which causes your delay to be 10 seconds longer than it should be.
As an additional note, when using .find(), you need only pass in the string css selector you are using, not the enter jQuery object:
$('#br_Panel').find('.smallPanel').fadeIn();

How do smooth slides work in javascript?

For a while now i have been trying to figure out the algorithms behind smooth slides, fades etc..in javascript. Just to give you an example of what am talking about, I have seen a div with content in it that had a height of 0px and on toggled, it didn't just snap to height, it smoothly and gradually grew to height using some sort of function. What i do know is that the height of this div was being assigned its height value from either a date object that had an interval set or a loop of some sort. I've searched all over the web trying to find tutorials explaining how this works but failed. Can someone please either explain to me how to create my own smooth fades, slides or reference some links that i can read?
PS: I know i can just use jquery, but i want to know how the fades and slides actually work.

It's quite simple actually. All of these animations use a timer (see setInterval) with a short interval, say 100 milliseconds, and every time the timer fires, the property (height or whatever) is changed by a fraction of the total amount instead of all at once.
For example, if you want to slide from a height of 0px to 200px in 1 second, then you could set up a timer that fires every 100 ms and increases the height of the DIV by 20px. That way, in 1 second, the timer would have fired 10 times and the height would be 200px.
A simple example:
function slideOpen(elem, finalHeight, slideTime) {
var count = slideTime * 10; // 10 intervals per second
height = 0, // current height
delta = finalHeight / count; // change in height per interval
var timerId = setInterval(slide, 100);
function slide() {
height += delta;
elem.style.height = height + 'px';
if (--count == 0)
clearInterval(timerId);
}
}

I have never looked at the jQuery code myself, but i'm pretty sure it uses a loop/timeout to increment the top/left/bottom/right css position of the element gradually using the specified easing equation.
You might want to have a look at jQuery source code for the animate() function.

CSS3 makes it trivial.
For non-CSS3 based solution, this is the first Google result for the query "javascript smooth animation": http://www.schillmania.com/content/projects/javascript-animation-2/

I am adding some code from one of my projects to move the div right
belolw xs_tuck() will be called till finalleftpositionval reaches
This code makes the div move to right.
if(xs_endpt<finalLeftPositionVal){
xs_endpt+=5;
xs_pDiv2.style.left=xs_endpt;
setTimeout("xs_tuck();",20);
}