Question

i dont know why the element is not animating.. im just following what is the code from jquery.com

$(document).ready(function() {

var theW = 249 * slideThumbCount;

$("div.bCont").css("width",theW).css("left","0px");
for(i = 0;i<slideThumbCount;i++)
{
    $("<div>").attr("class","bsThumb bs_" + i).appendTo("div.bCont");
    $("<img />").load(function(){

    }).attr("src","imgDirectory/scrollingImages/img_"+i+".png").appendTo("div.bs_"+i);
}

$("div.bCont").animate({left:50},5000,function(){
    alert('done');
});
});

any help please.. 🙂

Answer 1

try it this way:

var slideThumbCount = 3; // ???

$(document).ready(function() {

   var theW = 249 * slideThumbCount,
       bCountRef = $("div.bCont"),
       slideThumbCountImage = 0,
       onEndLoadImage = function() {

         // check this
         $(bCountRef).find("div.bsThumb").show();

         $(bCountRef).animate({left: 50}, 5000, function() {
            alert('done');
         });

       };

   $(bCountRef).css("width", theW).css("left", "0px");

   for(i = 0; i <slideThumbCount; i++) {

         $("<img />")
            .attr("src", "imgDirectory/scrollingImages/img_" + i + ".png")
            .load(function(ev){

               $('<div style="display:none">')
                 .attr("class","bsThumb bs_" + i)
                 .append(this) // <-----
                 .appendTo("div.bCont");

               // control for completion of the loading images
               slideThumbCountImage++;
               if (slideThumbCountImage == slideThumbCount)
                  onEndLoadImage();

            });
    }

});