javascript - jQuery -> 图像跳过屏幕

Question

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

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',
            });
        });

Answer 1

你可以按照尼克在评论中所说的那样做，或者从

fadeIn()
fadeOut()

到

show()
hide()

它发生在第一个上，因为当你点击#vest2时，你隐藏然后两者都取消隐藏 #vest2，所以 #vest1 立即消失。

但是当返回到 #vest1 时，您不会立即隐藏它们，它们都会在屏幕上出现一瞬间，而一个正在淡出，一个正在淡出，导致你得到的那个“跳跃”。

JSFiddle