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元素

回答

相關問題