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
Related
I have 3 text boxes. They are hidden by default, and I need them to simultaneously fade in and slide down 40px on DOM load. They also need to be "staggered" such that after the element finishes it's animations the next one triggers.
Here is the relevant js:
jQuery(function($) {
"Use Strict"
var outerFunction = function(dropIn, time, offset) {
$(dropIn).each(function() {
var me = $(this);
var mejo = $(this).children('.drop-in-text-opacity-wrap');
setTimeout(function() {
me.css({'margin-bottom': 0});
mejo.fadeIn(1000);
},time)
time = time + offset;
})
}
outerFunction('.drop-in-text', 0, 500)
});
and a working example on codepen
As you can see I'm most of the way to a solution but when the second and third iterations start, the pevious elements jump back to their original position (though the css doesn't change back when this happens per the inspector).
I've looked at all kinds of answers here on SO using:
.dequeue(),
animate({//some code},{queue: false}),
.stop()
etc
But I'm not getting any love. I'd be grateful for any insight!
Changes I made:
CSS:
Removed margin from drop-in-text.
Added translateY(-40px) to it.
JS:
Changed margin-bottom: 0 to transform: translateZ (0) translateY(0)
CODEPEN
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.
I'm using jquery on a single page web site to slide the next "page" onto the screen when the user clicks a button. I would like the current page to slide out to the left as the new page slides in from the right, so that there is no empty space shown, but currently I am only able to get the current page to disappear as the next page slides in. The code I'm using is here: http://jsfiddle.net/xoa029jz/5/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
$(nextPage).css('display', 'block');
$(currentPage).animate({left: '-100%'});
$(currentPage).removeClass('current-page');
$(nextPage).addClass('current-page');
$(nextPage).animate({left: '0%'});
}
Your CSS transitions are fighting with the jQuery animation. Until I hear which you prefer I have turned off the CSS transition.
The other fixes are to set the initial position of the elements about to animate and to wait for the panel to leave completely before removing the current-page class.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
currentPage.css('left', '0%').animate({
left: '-100%'
}, function () {
currentPage.removeClass('current-page');
});
nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({
left: '0%'
});
}
I also cleaned up a few redundant items (chained selectors etc).
You are better off just using jQuery animation, initially while you get it working, then adding a plugin (like velocity.js) to make the animations use CSS transitions, rather than try to mix the two.
I've been trying to adapt the following code to integrate with my CSS3 slider (animated and timed with keyframes) however as you can't use .animate in js when using css3 animations on the same element I either have to use one or the other.
JS I've adapted for my slider
The current js works in the sense that it navigates through the slides my only issue is that it doesn't 'slide' to each slide it jumps.
I'd really like to keep the slideshow as it is and just want to update my js so that the slide transition works. I'm not great with js so I've been finding it difficult to find a solution.
If anyone could give some advice or a solution to my problem it would be truly appreciated.
DEMO
JS
//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);
//if user clicked on prev button
$('#previous').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the last item and put it as first item
$("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the first item and put it as last item
$("#carousel .video-list li:last").after($("#carousel .video-list li:first"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
I don't see why .animate is needed, because I have used
transition: left 1s ease;
in my CSS to achieve the same things, with a smoother animation than I got with jQuery. I tried deleting the:
//slide the item
$("#carousel .video-list").animate(...
for the left and right. I also added some text to the html divs so that you can see how it's moving better. Sorry that I couldn't get it working, but I really feel that "transition" is what you need to look into. Here's the fiddle :)
...
I think your simplest solution would be to ditch the whole CSS animate, and build your own carousel:
Consider a film strip, which is a bunch of pictures lined up next to each other. Now consider a paper with a box cut-out, the size of one picture. We put the strip behind the paper, and see only one image. If we move the strip, we can change which image we see.
The film strip will be a div with { display: inline-block; } property, containing each of the videos. The box cut-out will be a div with { overflow: hidden } property. To move the strip, we simply use $('#strip').css({'left': positionofstripleft - widthofbox }) in our javascript. And for the animation, a simple setInterval(Nextfunction, 65000) to do what clicking next would do every 65 seconds.
Finally, a CSS transition will make the movements actually animated.
I want to make a top 10 list where it updates to another set of top 10 list, but tickering the whole list to another is way too boring and simple.
What I want is to fade out then change each position one after another from top 1 to top 10.
I lack knowledge on javascript/jquery. but if my logic is right it only needs a 1 sec. timeout delay on each position and each position has the same interval delay changing one to another.
Try jQuery for animations
I'd suggest using jQuery for animations to fade elements in and out as well as animations, which it sounds like you're asking about.
jQuery — Fade controls.
$(document).ready(function () {
$('div').fadeToggle('slow'); //Fade in or out based on CSS display:.
$('div').fadeOut('slow'); //Fade an element (div) out.
$('div').fadeIn('slow'); //Fade an element (div) in.
});
jQuery — Slide controls.
$(document).ready(function () {
$('div').slideToggle('slow'); //Slide in or out based on CSS display:.
$('div').slideOut('slow'); //Slide an element (div) out.
$('div').slideIn('slow'); //Slide an element (div) in.
});
jQuery — Delay an animation.
$(document).ready(function () {
$('div').delay(500).slideToggle('slow'); //Slide in or out based on CSS display: after half a second.
});