JQuery appendTo и разделиться, чтобы воспроизвести анимированный GIF

Question

Это мой ЯШ:

$(document).ready(function() { 
    $lrgBanner = $('#panel'); 
    $lrgBanner.detach(); 

    $('#banner img').click(function() { 
     $lrgBanner.appendTo('#ad').show(); 
     $('#banner').hide(); 
     console.log('banner was clicked'); 
    }); 

}); 

$('#close img').click(function() { 
    $('#banner').show(); 
    $lrgBanner.detach(); 
    console.log('close was clicked'); 
}); 

И в HTML:

<div id='ad'> 

    <div id='banner'> 
     <img src="img/hp-small.gif" alt="banner advertisement" /> 
    </div> 

    <div id='panel'> 
     <div id='background'> 
      <img src="img/hp-large.gif" alt="" /> 
     </div> 
     <div id='close'> 
      <img src="img/btn_close.gif" alt="close" /> 
     </div> 
    </div> 

</div> 

ДИВ #background содержит анимированные GIF. Мне сказали, что использование detach и appendTo перезапустит gif-контент, но он, похоже, не работает.

Я задавался вопросом о попытке использовать функцию загрузки (или выгрузку на функции IMG # Закрыть клик.

Кто-нибудь есть какие-либо советы?

Спасибо заранее.

Answer 1

Вы должны сбросить атрибут SRC анимированных GIF вместо:

SEE DEMO

Обратите внимание, что вы не должны установить переменные как глобальные, если вам не нужно обращаться к нему из глобальной области.

$(document).ready(function() { 
    gifAnimated = $('#background img')[0], 
    gifSrc = "http://mlkshk.com/r/R245.gif"; 
    $lrgBanner = $('#panel'); 
    $lrgBanner.detach(); 

    $('#banner img').click(function() { 
     gifAnimated.src = gifSrc; 
     $lrgBanner.appendTo('#ad').show(); 
     $('#banner').hide(); 
     console.log('banner was clicked'); 
    }); 

}); 

$('#close img').click(function() { 
    $('#banner').show(); 
    $lrgBanner.detach(); 
    gifAnimated.src = ""; 
    console.log('close was clicked'); 
});