CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Linens
Linens

Reputation: 7942

JQuery animated banner

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.

I am only beginner at jQuery so any help would be amazing.Thanks.

Upvotes: 5

Views: 3513

Answers (3)

Dutchie432
Dutchie432

Reputation: 29160

There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.

Live Demo http://jsfiddle.net/Jaybles/WEzny/

Upvotes: 1

isotrope
isotrope

Reputation: 1847

I see you have a response. In case this version is of any help to you: http://jsfiddle.net/vCbcz/ Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.

$('#slider').animate({
    marginLeft: '-' + ind * 105 + 'px'
});

and back

$('#slider').animate({
    marginLeft: 0 + 'px'
});

Upvotes: 1

Aron Rotteveel
Aron Rotteveel

Reputation: 83173

As for the positioning problem: you need to drop the left declaration in your second function.

Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:

function() {
    var position = $.data(this, 'position');
    var ind = $(this).index();
    //moves image back to original position

    $('#container div').each(
    function() {
        $(this).animate({
            right: "",
            width: 100

        });
    });
});

Working example here.

Upvotes: 2

Related Questions