Как заставить jQuery анимировать - показывать скрытый элемент плавно?

ProgramBox

Как заставить jQuery анимировать — показывать скрытый элемент плавно?

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Я заметил, что когда я пытаюсь анимировать элемент, который изначально скрыт в поле зрения, анимации нет — элемент просто появляется сразу.

Попробуйте следующий код, например:

 <html>
  <head>
    <style type="text/css">
      span {white-space: nowrap; display: none}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script type="text/javascript">
      function hide() {
        $("span").animate({width: "hide"}, 2000);
      }
      function show() {
        $("span").animate({width: "show"}, 2000);
      }
    </script>
  </head>
  <body>
    <span>This is a span.</span>
    <button onclick="hide()">hide</button>
    <button onclick="show()">show</button>
  </body>
</html>

Сначала span элемент скрыт из-за CSS. show() при редактировании он просто появляется сразу, хотя я прошу 2-секундную анимацию. ( hide() -ing это работает плавно.)

Как я могу сделать это show() тоже плавно?

Во время этого я заметил и другую проблему: во время анимации вертикальное расположение элементов немного меняется (если вы присмотритесь, вы увидите, что кнопки немного ниже, а диапазон немного выше во время анимации). Почему это так и как это можно предотвратить?

Кстати, я использую width в этом примере, но то же самое происходит для height . Я использую Firefox 4.

Редактировать: прочитав ответы, приведенные до сих пор, я хотел бы подчеркнуть, что проблема возникает только тогда, когда элемент изначально скрыт CSS — в противном случае приведенный выше код работает отлично. Кроме того, меня не интересуют все виды других анимаций (например, собственная анимация jQuery show() или opacity анимация) — я хочу свою собственную анимацию (как width в моем примере).

Ответ №1:

Я думаю, что это ошибка в jQuery. Прежде чем jQuery начнет показывать элемент, который он не устанавливает display: inline-block . Таким образом, он остается display: inline , и элементы с таким стилем не «реагируют» на изменения ширины / высоты. Итак, он не анимирован. Перед скрытием он устанавливается правильно, поэтому он анимируется.

Мне удалось обойти это, установив стиль примерно так:

 span {white-space: nowrap; display: inline-block; overflow: hidden;}
.span {display: none;}

и html:

 <span class="span">This is a span.</span>
<div style="display:inline-block; overflow: hidden;">
    <button onclick="hide()">hide</button>
    <button onclick="show()">show</button>
</div>

~~Редактировать: я думаю, что кнопки меняют свое положение из-за установки span display стиля элемента inline-block .~~

Edit2: Другим обходным путем является не использование span , а некоторый блочный элемент.

Edit3: чтобы предотвратить изменение положения кнопок, вам нужно обернуть их span (или другим разрешенным тегом html), которые задали одинаковые display overflow стили и, как span и элемент, во время анимации. То есть display: inline-block; overflow: hidden; . Я отредактировал код, чтобы отразить это.

1. Спасибо, Бениамин! Установка его на встроенный блок работает 🙂 Что касается изменения позиции, есть ли способ предотвратить это? Это наносит ущерб визуальному аспекту моего сайта.

2. Отредактированный ответ для устранения изменения позиции.

Ответ №2:

Используйте собственные функции jQuery show() и hide() . Вы можете указать продолжительность для них.

http://api.jquery.com/show/

1. Я не использую собственный jQuery show() и hide() потому, что мне нужна моя собственная анимация (например, анимация width свойства). В любом случае, та же проблема возникает и при их использовании (они анимируют несколько свойств; некоторые из них работают плавно, а некоторые нет). Я подчеркиваю, что проблема возникает только тогда, когда элемент изначально скрыт CSS.

Ответ №3:

Попробуйте

.show('slow') и .hide('slow')

или попробуйте

.fadeOut() и .fadeIn()

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

1. width и height МОЖЕТ быть присвоено 'hide' свойство и 'show' . И обычно это работает отлично. Я подчеркиваю, что проблема возникает только тогда, когда элемент изначально скрыт CSS.

2. Не забывайте .slideDown([duration]) и .slideUp([duration]) .