jQuery & Animation - Cloned elements can not be animated

<div id="HoriUpImage1">         
    <div id="imgBlur1Outter"><img  src="img/dscf2601.jpg" /></div>
    <div id="imgBlur2Outter"><img  src="img/resto-ambiance-bw.jpg" /></div>
    <div id="imgBlur3Outter"><img  src="img/white-frontier-bear2.jpg"/></div>
    <div id="imgBlur4Outter"><img  src="img/white-frontier-beers-bw.jpg"/></div>
    <div id="imgBlur5Outter"><img  src="img/white-frontier-faverge-bw.jpg"/></div>
</div>

jQuery :

$("#HorizontalUp").hover(function(){        
    shit = setInterval(function(){
    fuck3++;
    $("#" + $("#HoriUpImage1").children()[$("#HoriUpImage1").children().length - fuck3].id).clone().attr("id","created" + fuck3).insertBefore("#" + $("#HoriUpImage1").children()[0].id)                    
        if($("#HoriUpImage1").children()[$("#HoriUpImage1").children().length - fuck3].id.indexOf("imgBlur") >= 0){
            $("#" + $("#HoriUpImage1").children()[$("#HoriUpImage1").children().length - fuck3].id).animate({opacity: 0},1000);
        }
        if($("#HoriUpImage1").children()[$("#HoriUpImage1").children().length - fuck3].id.indexOf("created") >= 0){
            $("#" + $("#HoriUpImage1").children()[$("#HoriUpImage1").children().length - fuck3].id).animate({opacity: 0}, 1000);
        }                   
    }, 1000);                       
    $("#HoriUpImage1").transition({opacity:1, scale:1},function(){$("#HoriUpImage1").stop();});
        $("#shadowHorizontalUp").css("opacity","0");
    }, function(){
        clearInterval(shit);
        $("#HoriUpImage1").transition({opacity:0, scale:1.3},function(){$("#HoriUpImage1").stop();});
        $("#shadowHorizontalUp").css("opacity","0.5");
    });                 

Problem : The animation here tries to turn the opacity of selected element into 0 (zero). I have no idea why it only works for elements with id manually created. But it doesn't work for those cloned elements with dynamically created

Thanks