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动态图像点击

回答

相关问题