представление изображения с помощью меню аккордеон

Question

У меня есть меню, как это:

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

и у меня также есть DIV в другом месте в моем HTML

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

Я хочу, чтобы нажать на ссылку и чтобы изображение отображалось в div. Я пробовал некоторые коды, такие как

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

но он ничего не делает. Div остается пустым.

Я искал эти форумы, но не смог найти адекватного ответа.

Update

У меня также есть некоторые JavaScript, чтобы сделать выше меню colapsing один. Могут ли эти инструкции (скрыть, показать и переключить - их куча!) Столкнуться с этим кодом ???

Answer 1

Ваш звонок fadeIn сразу после добавления изображения: что, если изображение занимает слишком много времени для загрузки? Он отображается в середине затухания или после окончания замирания: jsfiddle.net/Xt5La/

Вы можете использовать обработчик нагрузки на изображениях, см. Эту скрипту: jsfiddle.net/UNqJh/.

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

function loaded() { // load handler } 

На боковой панели это также может помочь определить, действительно ли изображение загружено. Но проще, что говорит ваша консоль? Изображение добавлено в DOM?