0

I have a menu like this:

<ul class="leve1">
    <li>
        <div class="some">
            <a href="images/image1.jpg">image1</a>
            <a href="images/image2.jpg">image2</a>
            <a href="images/image3.jpg">image3</a>
            ...
        </div>
    </li>
    ...
</ul>

and I also have a div in another location in my html

<div id="dest"></div>

I want to click in the link and make the image appear in the div. I've tried some codelines like 

$(document).ready(function () {
    $("div.some a").click(function (event) {
        event.preventDefault();
        $("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
    });
});

but it doesn't do anything. The div remains blank.

I've searched these forums but couldn't find an adequate answer.

Update

I also have some javascript to make the above menu a colapsing one. Can these intructions (hide, show and toggle - a bunch of them!) be colliding with this code???

jpferreira
  • 1
  • 1

1 Answers1

0

Your calling fadeIn right after adding the image : what if the image takes too much time to load ? It gets displayed in the middle of the fade or after the fade is over : jsfiddle.net/Xt5La/

You can use a load handler on images, see this fiddle : jsfiddle.net/UNqJh/.

var img = new Image();
img.onload = loaded;
img.src = url;

function loaded() { // load handler }

On a sidenote it could also help to see if image is actually loaded. But simpler is, what does your console say ? Is the image added to the DOM ?

adjogima
  • 169
  • 3