I have created my own slider. Each slide has different animations over different elements, so I have something like this for the buttons to change from one slide to another.
$('.content1').click(function(e){
$('#image1').animate({'margin-left': '0px', 'margin-top': '0px'});
$('#box1').animate({'margin-top': '0px'});
hide2(); //hiddeing slide2
hide3(); //hidding slide3
e.preventDefault();
});
$('.content2').click(function(e){
hide1(); //hidding slide1
hide3(); //hidding slide2
$('#box2').animate({'margin-top': '0px'});
$('#image2').animate({'margin-top': '0px'});
e.preventDefault();
});
$('.content3').click(function(e){
hide1();
hide2();
$('#box3').animate({'margin-left': '0px'});
$('#image3').stop().delay(1000).show().animate({'opacity': '1'});
e.preventDefault();
});
I would like now to add an interval for the slider to move alone every X seconds.
I wonder if it is possible to make 3 different calls instead of just one function I am used to:
setInterval(function(){
nameOfFunction();
}, 6*1000);
Thanks.
Finally I solved it using setTimeout as #BradM recommended.
Im sure there's a more simple way, but here is how I did it.
Here's the code:
Menu click events:
$('.content1').click(function(e){
slide1();
e.preventDefault();
});
$('.content2').click(function(e){
slide2();
e.preventDefault();
});
$('.content3').click(function(e){
slide3();
e.preventDefault();
});
Slide effects
function slide1(){
next = 2; //setting which is gonna be the next slide
$('#image1').animate({'margin-left': '0px', 'margin-top': '0px'});
$('#box1').animate({'margin-top': '0px'});
hide2();
hide3();
}
function slide2(){
next = 3; //setting which is gonna be the next slide
hide1();
hide3();
$('#box2').animate({'margin-top': '0px'});
$('#image2').animate({'margin-top': '0px'});
}
function slide3(){
next = 1; //setting which is gonna be the next slide
hide1();
hide2();
$('#box3').animate({'margin-left': '0px'});
$('#image3').stop().delay(1000).show().animate({'opacity': '1'});
}
Hidding functions
function hide1(){
$('#image1').animate({'margin-left': '2000px'});
$('#box1').animate({'margin-top': '-2000px'});
}
function hide2(){
$('#box2').animate({'margin-top': '600px'});
$('#image2').animate({'margin-top': '-2000px'});
}
function hide3(){
$('#box3').animate({'margin-left': '-2000px'});
$('#image3').animate({'opacity' : '0', 'display' : 'none'}, function(){
$(this).hide();
});
}
Onmouse over/out actions
//when its over, we stop the movement
var delay = 6000; //6 seconds
$('#slider').hover(function(){
clearTimeout(timer);
}, function(){
//starting again the animation (since the last slide)
timer = window.setTimeout(playSlide, delay);
});
Main playslide function
var next = 2; //next slide will be the 2nd one at the start
function playSlide(){
var name = "slide" + next;
var method = eval(name);
method();
//calling recursively the function
timer = window.setTimeout(playSlide, delay);
}
First call
//only if there's an slider, we initate it
if($('#slider').length){
//first call the the slider
timer = window.setTimeout(playSlide, delay);
}
Related
I have a slider with arrows. When I click on these arrows a lot of times, the slider continually slides depending on how many times I click the arrow. How do you prevent clicking on the arrow until the sliding animation is done?
Please see what I mean in my pen here: http://codepen.io/gianaguilar/pen/JGaxKL
Try clicking on the arrows multiple times and how the slider responds. I need to be able to slide one click at a time.
Thank you!
Here is the jquery code
var $visibleSlide, getDataSlide, sliderInterval, getDataNextSlide, getDataPrevSlide, getDataNavDot;
var fadeDuration = 1000;
var pause = 8000;
//show first slide
$('.slides li:first-child').css('display', 'block');
//show first nav dot
$('.nav li:first-child').addClass('active-cd');
//find out what slide is visible and get its data attribute
function getSlideInfo() {
$visibleSlide = $('.slides').find('li:visible');
getDataSlide = $visibleSlide.data('n');
getDataNextSlide = $visibleSlide.next().data('n');
getDataPrevSlide = $visibleSlide.prev().data('n');
}
//show next slide
function showNextSlide() {
getSlideInfo();
$('.nav li').removeClass('active-cd');
if (getDataSlide < 3) {
$visibleSlide.fadeOut(fadeDuration);
$visibleSlide.next().fadeIn(fadeDuration);
$('.nav li[data-cd=' + getDataNextSlide + ']').addClass('active-cd');
} else {
$visibleSlide.fadeOut(fadeDuration);
$('.slides li:first-child').fadeIn(fadeDuration);
$('.nav li:first-child').addClass('active-cd');
}
} //end showNextSlide
function showPrevSlide() {
getSlideInfo();
$('.nav li').removeClass('active-cd');
if (getDataSlide > 1) {
$visibleSlide.fadeOut(fadeDuration);
$visibleSlide.prev().fadeIn(fadeDuration);
$('.nav li[data-cd=' + getDataPrevSlide + ']').addClass('active-cd');
} else {
$visibleSlide.fadeOut(fadeDuration);
$('.slides li:last-child').fadeIn(fadeDuration);
$('.nav li:last-child').addClass('active-cd');
}
} // end showPrevSlide
// controls
$('.next').on('click', showNextSlide);
$('.prev').on('click', showPrevSlide);
//autoplay
function startSlider() {
sliderInterval = setInterval(showNextSlide, pause)
}
startSlider();
$('.slideshow').mouseenter(function() {
clearInterval(sliderInterval);
});
$('.slideshow').mouseleave(startSlider);
//control dots clicks
$('.nav li').on('click', function() {
getDataNavDot = $(this).data('cd');
getSlideInfo();
$('.nav li').removeClass('active-cd');
$(this).addClass('active-cd');
$visibleSlide.fadeOut(fadeDuration);
$('.slides li[data-n=' + getDataNavDot + ']').fadeIn(fadeDuration);
}); //end dots click
You can define a variable isAnimating that is set to true when you are in the next or previous slide function, and set to false when the animation is complete (within a callback function to one of your fade functions).
A simple check at the top of these next and previous functions to return false if the isAnimating function is set to true will prevent the animations from queuing up.
See here: http://codepen.io/anon/pen/XXPOQY
I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});
I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
What I want: I created a sort of image gallery with a thumbnail slider and I want the thumbnails to scroll when a nav button is clicked but if the button is pushed again before the animation is completed it doesn't keep adding to the que, it clears the que and only completes the current animation.
What my problem is: When the button is clicked it puts the click animation in a que and completes all the clicks in order. Maybe someone can help we word this better.
What I have tried: I have tried adding .finish() and .stop(true, true) to my js file but I can't seem to get it working right. I'm probably putting it in the wrong spot or even using the wrong thing, I don't know and so I need some help.
Here is a functioning jsfiddle: http://jsfiddle.net/ma9j6o09/2/
Some of it is not working since my images are locally hosted but the slider part for the thumbnails is.
This is my function for animating the movement; what do I add to get the effect I need?
var clicks = 0;
$("#right").click(function() {
if ( clicks < 5 ) {
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
// Animation complete.
});
}
});
$("#left").click(function() {
if (clicks > 0) {
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
}
});
Try this out: http://jsfiddle.net/ma9j6o09/3/
In response to your question about .stop() you would use it like this:
$("#thumbContainer").stop(true, true).animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
});
But this will indeed not achieve what you want as it means it will stop the animation and jump to the last frame straight away so you lose the animation you wanted.
Instead use the flag I used in the fiddle which makes it impossible to even try animate whilst an animation is in progress.
var clicks = 0,
animating = false;
$("#right").click(function() {
// Only animate if we are not already animating
if ( clicks < 5 && !animating ) {
animating = true;
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
$("#left").click(function() {
// Only animate if we are not already animating
if (clicks > 0 && !animating) {
animating = true;
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
I have a function that when run, animates a div on my page and removes a class, what I want to do however is remove the class at the end of the height animation, is this possible with jQuery?
var el = $(this).find('ul li');
var img = $(this).find('ul li img');
$(this).removeClass('active');
//return false;
el.animate({height:'135px'}, 500);
el.css({
'background-position':'top left',
'background-size' : 'auto auto'
});
$(this).find('ul li img').animate({height:'270px'}, 500);
$(this).animate({height:'135px'}, 500);
img.attr('src', function(i, value) {
return value.substring(28);
});
There is a complete function that runs once the animation has completed. According to the jQuery docs for the animate function, you can use it like so:
el.animate({height:'135px'}, 500, function() {
//code to run when complete goes here
});
Use the complete call like this inside the .animate function:
complete: function() { your func u wanna call when ani is complete..; }
I'm currently working on a small jQuery element but having some trouble with clearInterval.
I made a jsFiddle with an example what I'm working on: http://jsfiddle.net/eWTSu/
As you can see it rotates fine but when I hover over a navigation button the rotation does not stop. Also there's a problem with the order of the rotation. The rotation goes div1, div2, div3, div4 and repeat. But when I hover of the third button while the rotation is on the first div it loads the second div on top of the third.
Does anyone have a good tip for me?
Try this (See DEMO):
jQuery(document).ready(function () {
$('.greenC, .blueC, .orangeC').hide();
$('.nav li').hover(function () {
var liClass = $(this).attr('class');
$('.slider').hide();
$('.' + liClass + 'C').show();
});
(function () {
var interval_function = function () {
jQuery('#header_slider > div:first')
.hide()
.next()
.show()
.end()
.appendTo('#header_slider');
};
var interval = setInterval(interval_function, 1000);
$('.nav li').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 1000);
});
}());
});