Проблема jQuery append ()

Question

У меня есть 2 изображения, одно в качестве фонового изображения и 1 в качестве изображения на переднем плане

CSS выглядит следующим образом:

#backImage{
    position: absolute;
    float: left;
    z-index: 0;
}

#mainImage{
    float: left;
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 10px;
}

Наценка выглядит следующим образом:

<div id="homepageCarousel">
    <img id="backImage" src="discreet images/white_bg.png" />
        <img id="mainImage" src="discreet images/homepage_img1.jpg" />  
    //some other divs
</div>

У меня вверху есть панель навигации,

при наведении курсора на каждый элемент в строке, mainImage должен идти, и должно появиться изображение, соответствующее элементу навигации.

Как я могу сделать это в jQuery, это то, что у меня есть до сих пор: (сейчас я просто пытаюсь remove() и append() mainImage)

$("#navigation li").mouseover(function(){
        $("#mainImage").remove();
    }).mouseout(function(){
        $("#backImage").append("<img id='mainImage' 
           src = 'discreet images/homepage_img1.jpg' />");
});

Answer 1

Я бы предложил просто изменить атрибут src элемента img, а не добавлять и удалять элементы, так как это дорогостоящие операции для запуска.

Answer 2

Менее дорогая операция - просто скрыть и показать основное изображение:

var $main = $("#mainImage");

$("#navigation li").mouseover(function() {
  $main.hide();
}).mouseout(function() {
  $main.show();
});

Answer 3

Вы удаляете #mainImage из DOM, я верю, поэтому он не может вернуться. Было бы лучше изменить $('#mainImage').style.display на inline или none и наоборот для #backImage и загрузить их обоих.

Удаление их из DOM каждый раз немного неуклюже.