CODEWITHSUNDEEP
jquery
nnash
nnash

Reputation: 87

Animate Background Position on Each Click

I'm developing a photography portfolio theme and I've hit a bit of a snag while writing the jQuery for a feature on the site. What I'm trying to accomplish is to get it so that every single time I click the previous and next icons an inline list of thumbnails moves left or right 110px (the width of a single thumbnail).

$('.next').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#thumbnailGallery ul').animate(
                    {left:-110}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
            }
        );
    }
);

$('.prev').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#thumbnailGallery ul').animate(
                    {left:110}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
            }
        );
    }
);

I'm currently using the .each(); function to bind the animation using onClick but the animation only occurs once. For example if I click .next it will animate -110px but when I click it again it won't. The same occurs for .prev.

Upvotes: 2

Views: 847

Answers (1)

Falle1234
Falle1234

Reputation: 5063

Try this instead:

$('.next').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#thumbnailGallery ul').animate(
                    {left:"-=110px"}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
            }
        );
    }
);

$('.prev').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#thumbnailGallery ul').animate(
                    {left:"+=110px"}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
            }
        );
    }
);

should work according to the examples

Upvotes: 2

Related Questions