I have been stuck on this for a while, and I really do not understand the best way to do what I am trying to do.
I have a 2 Divs, (Keep in mind i might need more). I want only div 1 to be displayed at first, then when I press an arrow on the first div, it slides to the left, and a second div appears (sliding in from the right). How would I do this to loop? I thought I could use css3, but that did not work very well.
Here is what I have got so far: enter link description here
This is the jQuery, but it only handles One arrow:
$('.arrow-right').click(function () {
// Slide div to left, and slide new from right ... repeat/Loop
$("#div1").animate({
left: "-999%"
}, 1000, function () {
$("div1").css("block", "none");
$("div2").animate({
// Animate Right Div from right to left ...
});
});
});
I have gotten the animation from left to right, but I am just not understanding how I can loop this animation (like a slider) and make a button click for each div I have.
Am I on the right track? (My experiance in jQuery is very slim especially in animating)
Thanks!
EDIT
This is as close as I got to what I want, but I need it to loop, and I want to be able to add content without having to modify the jQuery too much. enter link description here
Set a global variable to 'lock' the script when it is animating.
isAnimating = false;
$('.wrapper').on('click', '.arrow-left', function() {
// Check if the lock is on, if it is, cancel additional clicks
if(isAnimating) return;
// Lock the buttons to avoid multiple user-interaction when script is animating
isAnimating = true;
// Get the current displayed div and the next div to be animated in
var $current = $(this).parents('.MovingDiv');
var $next = $(this).parents('.MovingDiv').next();
// Animate the current div out
$current.animate({
left: "-999%" // Animate to the left
}, 1000, function() {
$current.css({
// This doesn't really do anything important because the start point will be set again the next time the next time it is needed
left: "999%"
})
.appendTo('.wrapper'); // move to end of stack
// Animate the next div in
$next.css({
left: "999%" // set the start point from the right
}).animate({
left: "0%" // complete animation in the middle of the page
}, 1000, function() {
isAnimating = false; // unlock the script when done
});
});
}).on('click', '.arrow-right', function() {
if(isAnimating) return;
isAnimating = true;
var $current = $(this).parents('.MovingDiv');
var $next = $(this).parents('.MovingDiv').siblings().last();
$current.animate({
left: "999%"
}, 1000, function() {
$current.css({
left: "-999%"
});
$next.prependTo('.wrapper') // move to front of stack
.css({
left: "-999%"
}).animate({
left: "0%"
}, 1000, function() {
isAnimating = false;
});
});
});
Changed your CSS to:
.MovingDiv:first-child {
display: block;
}
.MovingDiv {
display: none;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments