CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Donny van V
Donny van V

Reputation: 981

jQuery -> image jumping over the screen

I have a code and i want that code to switch between bulletproof armor vests. When switching from the first to the second, nothing wrong will happen, but switching to the first creates a strange effect. How can i solve this?

http://www.bykwien.nl/soldier2/voorbeeld.html

fiddle: http://jsfiddle.net/4R3TS/

$('#vest1').click(function(){
            $('.block1').fadeIn();
            $('.block2').fadeOut();
            $('.vest').addClass('hide');
            $('.vest1').removeClass('hide');
            $('.vest1').css({
                position: 'relative',
                top: '-105px',
                left: '12px',
            });
        });

        $('#vest2').click(function(){
            $('.block1, .block2').fadeIn();
            $('.vest').addClass('hide');
            $('.vest2').removeClass('hide');
            $('.vest2').css({
                position: 'relative',
                top: '-210px',
                left: '12px',
            });
        });

Upvotes: 0

Views: 85

Answers (1)

Albzi
Albzi

Reputation: 15619

You can do as Nick said in the comments, or change from 

fadeIn()
fadeOut()

to 

show()
hide()

It happens on the first one because when you click for #vest2, you hide then both then unhide #vest2, so #vest1 dissapears instantly.

But when going back to #vest1, you don't instantly hide them and both of them are on-screen for a split second while one is fading out and one is fading it, resulting in that 'jump' you get.

JSFiddle

Upvotes: 1

Related Questions