CODEWITHSUNDEEP
javascriptjqueryhtmlimagejquery-animate
user1009573
user1009573

Reputation: 113

Javascript/JQuery .animate() not working

I'm trying to create a sliding image gallery where every interval they will slide along and the first image will fade out and the new image will fade in. The fading in and out is working and my images are set as 'position: absolute', but they won't slide. I set up a jsfiddle so you can see what's happening:

http://jsfiddle.net/9awwF/

The HTML code:

<head>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

</head>

<body>

<div style="position: relative; left: 0px; top: 0px;">

    <p id="discoImg1a"><a href="includes/images/discoImg1.png">
        <img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>

    <p id="discoImg2a"><a href="includes/images/discoImg2.png">
        <img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>

    <p id="discoImg3a"><a href="includes/images/discoImg3.png">
        <img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>

    <p id="discoImg4a"><a href="includes/images/discoImg4.png">
        <img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>

    <p id="discoImg5a"><a href="includes/images/discoImg5.png">
        <img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>

    <p id="discoImg6a"><a href="includes/images/discoImg6.png">
        <img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>

    <p id="discoImg7a"><a href="includes/images/discoImg7.png">
        <img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>

    <p id="discoImg8a"><a href="includes/images/discoImg8.png">
        <img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>

    <p id="discoImg9a"><a href="includes/images/discoImg9.png">
        <img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>

</div>

</body>

The script:

 $(document).ready(function () {

        $("#discoImg6a").hide();
        $("#discoImg7a").hide();
        $("#discoImg8a").hide();
        $("#discoImg9a").hide();

        var currentFirstSlide = 1;
        var maxSlides = 9;

        function updateSlides() {
            // Fade out the first image shown                
            $("#discoImg" + currentFirstSlide + "a").fadeOut(3000);

            // Go through every image and move them to the left by 250px
            for (var x = 1; x < 10; x++) {
                var left = $("#discoImg" + x + "a").position().left;
                $("#discoImg" + x + "a").animate({ left: left - 250 + 'px' });
            }

            // Calculate which slide the new one will be and fade it in
            var newSlide = currentFirstSlide + 5;
            if (newSlide > maxSlides) { newSlide = 1; }
            $("#discoImg" + newSlide + "a").fadeIn(3000);

            // Increment the current first slide ready for the next update
            currentFirstSlide++;
            if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; }
       }

        // Move the slides every 3.5s
        setInterval(function () { updateSlides() }, 3500);

    });

Thank you in advance for any help!

Upvotes: 0

Views: 275

Answers (4)

amostk
amostk

Reputation: 49

On your css try giving that absolute positions a left: 0px; may be it's going to slide automatically, and don't forget to give it a relative container.

Upvotes: 0

lshearer
lshearer

Reputation: 416

You're animating the left property of the p element, but it has a default position of static, so this doesn't do anything. You should either animate left on the img element or give absolute or relative positioning to the p element.

Upvotes: 3

kardossandor
kardossandor

Reputation: 23

There is no effect with property left without position absolute or fixed.

Upvotes: 0

user3014562
user3014562

Reputation:

The problem is that the p element has the id, not the img

<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..."  style="position: absolute; ..."/></a></p>

Upvotes: 1

Related Questions