jQuery - ＆gt;图像跳过屏幕

Question

我有一个代码，我希望该代码在防弹背心之间切换。当从第一个切换到第二个时，不会发生任何错误，但切换到第一个会产生奇怪的效果。我该如何解决这个问题？

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

小提琴：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',
            });
        });

Answer 1

你可以像尼克在评论中所说，或从

改变

fadeIn()
fadeOut()

到

show()
hide()

它发生在第一个，因为当您点击#vest2时，您hide然后unhide #vest2，所以#vest1立即消失。< / p>

但是当回到#vest1时，你不会立即隐藏它们，并且它们都会在屏幕上瞬间闪现，而其中一个渐渐消失，一个正在淡化，导致“跳跃”你明白了。

JSFiddle