jQuery animate () - PullRequest
       3

jQuery animate ()

4 голосов
/ 02 октября 2010

Мой код указан ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 width:200px;
 height:115px;
 z-index:1;
 left: 445px;
 top: 64px;
}
-->
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function toggle()

{

$("#Layer1").animate({width:"20px"},1000);

}
</script>
</head>

<body onload="toggle()">
<div id="Layer1"><img src="friend-line.jpg" width="243" height="380" /></div>
</body>
</html>

Теперь, когда страница загружается, изначально появляется анимация, но достаточно скоро размеры слоя 1 восстанавливаются. Я хотел бы знать, почему это происходит. Спасибо!

Ответы [ 4 ]

8 голосов
/ 03 октября 2010

Анимация добавляет 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);
});

Пример jsFiddle


Я не совсем уверен относительно того, что вы пытаетесь достичь с помощью своего кода, но вы также можете включить 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);
});

jsFiddle пример

Обратите внимание, что ширина div меньше ширины изображения. Не уверен, что это специально.

1 голос
/ 02 октября 2010

На самом деле размеры Layer1 не восстанавливаются. Тем не менее, размер изображения остается прежним. Причина, по которой он обрезается во время анимации, заключается в том, что функция animate автоматически добавляет объявление overflow: hidden; к тому, что она анимирует.

if ( opt.overflow != null ) {
    this.style.overflow = "hidden";
}

Как только анимация останавливается, overflow возвращается к значению по умолчанию, равному visible. Если вы хотите, чтобы оно оставалось обрезанным, просто добавьте объявление overflow: hidden в ваше правило CSS #Layer1.

1 голос
/ 02 октября 2010

возможно, потому что вы изменяете ширину div, а не ширину img

, также лучше использовать $(document).ready() в сценарии, чем onload в body

, если вы не хотите изменять размер изображения, а просто скрыть сброс содержимого на вашем css, вы можете добавить overflow: hidden;

в противном случае я не могу понять, почему возникла проблема.

0 голосов
/ 16 декабря 2015

используйте процент (%) вместо пикселя (px) в ширине вашего изображения. Поскольку при задании ширины изображения в пикселях, оно сохраняет фиксированную ширину изображения. И пока вы даете его в процентах (%), ширина изображения делится на его родительский элемент. Ваш код должен выглядеть следующим образом:

   <body onload="toggle()">
        <div id="Layer1"><img src="jquery-drag-drop/images/rrr.jpg" width="100%" /></div>
    </body>

Нажмите здесь, чтобы узнать больше об анимации jQuery с изображениями

...