Question

Right now the problem is that the first time when I click the image, the animation will happen as how I wanted it. However when I click on the same image the second time, it simply enlarge the size of the image within 0 sec without the animation transition.

var tempHolders = new Array(); 
$(document).ready(function(){
    $('ul li img').each(                 
        function(){ $(this).click(function($e){                          
            $('#picturesboard').hide();                          
            $('#enlarge').show();                                     
            if( tempHolders[$(this).attr('src')]==null){
                  tempHolders[$(this).attr('src')] = $(this).clone();
            }                                                    
            (tempHolders[$(this).attr('src')]).animate({
                   width: '1000px'
               },1000);                         
            $('#imgholder').prepend(tempHolders[$(this).attr('src')]);
            backbutton.innerHTML='GO BACK';
            backbutton.onclick=function(){                              
                      $('#picturesboard').show();
                      $('#enlarge').hide();
                     // return false;
             };
        $('#menu').prepend(backbutton);                                          
        });
    });
});

Answer 1

If im not wrong you need to set back the width of the attribute to 0 in your backbutton function. You can easily access it using .attr()