Animate div動態圖像點擊

這是我想要實現的：在頁面加載時從數據庫中獲取一堆圖像，並將它們附加到圖庫div，當點擊圖庫圖像時：淡出當前大圖像 - >更換褪色圖像的源到點擊小圖片的來源 - >主圖像的DIV容器動畫到新的圖像高度 - >淡出主圖像回Animate div動態圖像點擊

我有這樣的代碼：

$.getJSON('inc/API.php', 
{ 
    command: "get_ads_to_display" 
}, 
function(result){ 
    $("#img_main").attr('src', 'images/'+result[0].ad_image_filename); 
    for(var i = 0; i<result.length; i++) 
    { 
     $("<div class='div_item_container'>"+ 
      "<div class='div_ad_name'>"+result[i].ad_publisher+"</div>"+ 
      "<div class='div_ad_image'><img src='images/"+result[i].ad_image_filename+"' /></div>"+ 
     "</div>").appendTo("#gallery"); 
    } 

    // Channge main image src to src of a clicked image 
    //animate the main image div's height 
    $('.div_item_container').on('click', '.div_ad_image img', function() { 
     var src = $(this).attr('src'); 
     $("#img_main").fadeTo(200,0,function(){ 
      $("#img_main").attr('src', src); 
      var img = document.getElementById('img_main'); 
      var img_height = img.clientHeight; 
      //alert(img_height); 
      $("#div_main_image_container").animate({height:img_height+10+'px'},250,function(){ 
       $("#img_main").fadeTo(200,1); 
      }); 

     }); 
    }); 
});

它的作品，除了第一次點擊 - 第一次點擊任何畫廊圖像我沒有div動畫，它只是改變div的大小，替換t他形象src和淡入。之後，我有一個很好的動畫div的高度。爲什麼會發生這種情況，是否有解決問題的方法？

來源

2014-02-13 Igal

解決問題：gallery div沒有定義任何初始高度屬性。一旦我在CSS中定義它（即使height:0;工作） - 一切都很好。

來源

2014-02-13 21:24:10 Igal

您需要將事件委託給未動態創建某些元素 - （？你是在一個循環中右追加這個）

$('#gallery').on('click', '.div_ad_image img', function() {

#gallery而不是.div_item_container

來源

2014-02-13 20:57:38

圖庫div是靜態的，'div class ='div_item_container'是動態追加的，是的。我試圖將它委託給'＃gallery'，但它在第一次點擊時仍然不動畫。 – Igal

Animate div動態圖像點擊

回答

相關問題