CODEWITHSUNDEEP
jquerycss
HaleyBuggs
HaleyBuggs

Reputation: 915

jQuery causing element to jump on click

I can't figure this out for the life of me. I thought it was the negative margin I had on it, but it's still jumping even without it.

http://jsfiddle.net/U3yrb/1/

Just click one of the list items at the top and you'll see what I mean. =/

This is my CSS to my code:

#productNav {
    position: relative;
    list-style: none;
    z-index: 200;
    padding-bottom: 20px;
}
.selectedSubSlide {
    display: block;
}
#productNav li {
    display: none;
}

But I feel like the CSS isn't to blame. Is it something with the jQuery?

$().ready(function() {

    $('#productNavReference li').click(function() {

        var selectedSlide = $(this).attr('rel');

        $('#productNav li[rel="'+selectedSlide+'"]').fadeIn(500, function() {
            $('#productNav li').removeClass('selectedSubSlide');
            $(this).addClass('selectedSubSlide');
        });

        $('.selectedSubSlide').fadeOut(500);

    });

});

Thanks for any help!

Upvotes: 0

Views: 104

Answers (3)

T.S.
T.S.

Reputation: 1242

You should fade in the next slide after you faded out the current one, right? So do what you do with the fade in function, use the callback:

$().ready(function() {

    $('#productNavReference li').click(function() {

        var selectedSlide = $(this).attr('rel');

        $('.selectedSubSlide').fadeOut(500, function() {
            $('#productNav li[rel="'+selectedSlide+'"]').fadeIn(500, function() {
                $('#productNav li').removeClass('selectedSubSlide');
                $(this).addClass('selectedSubSlide');
            });
        });

    });

});

updated fiddle: http://jsfiddle.net/U3yrb/6/

You could use if($('#productNav li:animated').length) { return false; } on top of the click-event handler to prevent multiple pages from loading.

Upvotes: 1

Alen
Alen

Reputation: 1788

Problem is, while you fading your elements at some point you have those elements at the same time on page, therefore they need to position themselfes somehow. So my suggestions is to hide first element instantly and fadeIn another one.

Upvotes: 1

j08691
j08691

Reputation: 207901

Add position:absolute to your .selectedSubSlide and #productNav li selectors.

.selectedSubSlide {
    display: block;
    position:absolute;
}
#productNav li {
    display: none;
    position:absolute;
}

jsFiddle example

Upvotes: 0

Related Questions