CODEWITHSUNDEEP
javascriptjquery
shennan
shennan

Reputation: 11656

Strange Behaviour with .next() and a Simple Slideshow with jQuery

I've been banging my head against a wall with this one for a couple of hours now - no luck. In short, I can't seem to get the desired functionality from the next() jQuery method. I'm trying to make the next img tag in the DOM appear when clicking the image.

$(images).each(function(i){

    $('#images').append($(this).css({

        'display':(i) ? 'none' : 'in-line'

    }).click(function(){

        $(this).next().css({'display':'in-line'});

        $(this).css({'display':'none'});

    }));
});

The required image dissappears, but the 'next()' one doesn't show. What's the big idea? Here's the environment:

<div id="images">
    <img src="imgs/1.jpg" style="width: 333.33333333333337px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666669px; display: none; ">
    <img src="imgs/2.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/3.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/4.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
    <img src="imgs/7.jpg" style="width: 500px; height: 333.3333333333333px; position: absolute; top: 50%; left: 50%; margin-top: -166.66666666666666px; margin-left: -250px; display: none; ">
</div>

Is this something to do with the fact that these elements are dynamically created via jQuery? It's worth noting that the iteration over the dynamically created elements only get kicked off after the images have loaded.

Thanks.

Upvotes: 0

Views: 86

Answers (1)

Musa
Musa

Reputation: 97672

Its inline not in-line

$(this).next().css({'display':'inline'});

Upvotes: 3

Related Questions