JQuery анимация непрозрачности против отображения: нет - PullRequest
Новая
       3

JQuery анимация непрозрачности против отображения: нет

5 голосов
/ 26 июня 2011

Если у элемента есть отображение: в CSS его нет, то анимация прозрачности от 0 до 1 в jQuery не делает элемент видимым.

почему

что мне нужно добавить в animate (), чтобы сделать его видимым? 

el.css({
            opacity: 0,
            left: - 200
          }).stop().animate({
            opacity: 1,
            left: 0
          }, {
            duration: 333
          });

1 Ответ

23 голосов
/ 26 июня 2011

Сначала вам нужно показать его, используя метод show() [документы] .

Если ваш элемент не 't уже с непрозрачностью 0, тогда вы, вероятно, захотите установить это первым: 

.css('opacity',0).show().animate({opacity:1});

Пример: http://jsfiddle.net/DnE7M/1/

Или вы можете простоиспользуйте метод fadeIn() [документы] , который также должен учитывать display.

Пример: http://jsfiddle.net/DnE7M/

РЕДАКТИРОВАТЬ: Чтобы сделать его релевантным к коду, добавленному в вопросе: 

el.css({
        opacity: 0,
        left: - 200
      })
   .stop()
   .show()     // <-- make the element able to be displayed
   .animate({
        opacity: 1,
        left: 0
      }, {
        duration: 333
      });

Вы также можете сделать это прямо в вызове css() [документов] метод: 

el.css({
        opacity: 0,
        display: 'block',  // <-- 'block' or whatever is appropriate for you
        left: - 200
      })
   .stop()
   .animate({
        opacity: 1,
        left: 0
      }, {
        duration: 333
      });
...