CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Hunter Mitchell
Hunter Mitchell

Reputation: 7293

Looping jQuery animation issue?

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

Upvotes: 2

Views: 150

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79032

http://jsfiddle.net/jGqLw/9/

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;
}

Upvotes: 4

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

This will support any content.

Fiddle: http://jsfiddle.net/SinisterSystems/jGqLw/5/

You were on the right track. I'd try to set some global variables of the widths and whatnot that you need to actually need it to function with, rather than using percentages as it appears you did in your example.

Here's an idea of the standard way to do it:

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});

Upvotes: 1

Related Questions