jQuery，替换和动画img元素

jQuery新手在这里！我试图用另一个替换一个图像，同时动画它。这里是我的代码：jQuery，替换和动画img元素

HTML

<img id="salt" src="images/salt.png" alt="salt"/> 
<img id="pepper" src="images/pepper.jpg" alt="pepper"/>

CSS

#salt { 
    position: absolute; 
    top: 300px; 
    left: 180px; 
    cursor: pointer; 
} 

#pepper { 
    position: absolute; 
    top: 300px; 
    left: 180px; 
    cursor: pointer; 
    display: none; 
}

jQuery的

$(document).ready(function(){ 
    $("#salt").click(function(){ 
    $("#salt").animate({left: '300px'}); 
    $('#pepper').show(); 
    $('#salt').replaceWith($('#pepper')); 

    }); 
});

动画是WOR 'replaceWith'无效时为正弦;但当我试图替换图像时，盐就会消失，胡椒就会出现在第一个位置。我需要两个人中的一个（真的不介意哪一个）执行动作，然后在动画之后显示盐的位置。先谢谢你！！

来源

2017-06-14 A.Noot

你可以使用一个回调函数动画

$("#salt").animate({ 
    left: '300px' 
    }, 5000, function() { 
    $('#pepper').show(); 
    $('#salt').replaceWith($('#pepper')); 
    });

当动画完成后，该函数被调用

来源

2017-06-14 23:49:50

并确保你改变#pepper的CSS以及 –

功能完美地工作现在，非常感谢你！我仍然有CSS部分的问题，虽然...我把胡椒换成'left：480px;'现在，一旦动画完成，它会突然向右跳几个像素;不应该在最后一次看到盐的地方，因为它们有相同的尺寸等。 –

你可能要设置为'left：'300px'' –

jQuery，替换和动画img元素

回答

相关问题