Анимация добавляет CSS overflow:hidden
во время работы. Когда он останавливается, overflow
возвращается к своему предыдущему состоянию, поэтому вы должны просто навсегда добавить overflow:hidden
CSS к #Layer1
Кроме того, я предлагаю вам использовать функциональность jQuery doc ready вместо встроенного onload
Javascript.
Итак, весь ваш JS будет:
$(function() { // <== doc ready
$("#Layer1").css("overflow","hidden").animate({width:"20px"},1000);
});
Я не совсем уверен относительно того, что вы пытаетесь достичь с помощью своего кода, но вы также можете включить overflow:hidden
в свой CSS для #Layer1
:
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 445px;
top: 64px;
overflow:hidden;
}
С помощью вышеуказанного CSS вы можете использовать свой оригинальный код, просто заверните его в готовый документ и удалите onload
из HTML:
$(function() { // <== doc ready
$("#Layer1").animate({width:"20px"},1000);
});
Обратите внимание, что ширина div меньше ширины изображения. Не уверен, что это специально.