jQuery append() issue

Question

I have 2 images one as a background image and 1 as a foreground image

the css is as follows :

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

The mark-up is as follows :

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

I have a navigation bar at the top,

as I hover over each item in the bar, the mainImage should go and the image corresponding to the navigation item should appear.

How can I do this in jQuery, this is what I have thus far : (for now, I'm just trying to remove() and append() the mainImage)

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

Can you show a live demo that reproduces your problem and approach? Also, I believe that appending and removing elements is pretty expensive; have you considered just changing the src of the image element? — David Thomas
– David Thomas, Commented Feb 9, 2012 at 12:17
I'll try getting the live demo ASAP, meanwhile I'll try changing just the src. cheers — painotpi
– painotpi, Commented Feb 9, 2012 at 12:19
@david That worked !!! stupid me, just didn't think of it .. thanks. Post your comment as an answer, shall accept — painotpi
– painotpi, Commented Feb 9, 2012 at 12:24

David Thomas · Accepted Answer · 2012-02-09 12:26:52Z

I'd suggest simply changing the src attribute of the img element, rather than appending and removing elements as those are expensive operations to run.

twilson · Accepted Answer · 2012-02-09 12:27:25Z

You are removing #mainImage from the DOM I believe, so it can't come back. Would be better to change the $('#mainImage').style.display to either inline or none and vice-versa for the #backImage, and have them both loaded.

Removing them from the DOM each time is a little clumsy.

osahyoun · Accepted Answer · 2012-02-09 12:32:58Z

A less expensive operation would be to just hide and show the main image:

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

Tried it, the problem with this is, when I mouseout() from one navigation item to another, for the little transition time in between, the $main appeared.

Collectives™ on Stack Overflow

jQuery append() issue

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related