JQuery: запускать объект как скрытый таким образом, чтобы позволить .fadeIn () работать

У меня есть объект, который я хочу начать как скрытый. Я пробовал использовать каждый из этих стилей по очереди. У меня они есть в классе, а не как встроенные стили.

display:none;

и

opacity:0;filter:alpha(opacity=0);

Теперь оба они работают, очевидно, объекты загружаются скрытыми. Проблема в том, что когда я их использую, функция JQuery .fadeIn () не работает. Фактически, когда я устанавливаю непрозрачность на 0,5 (50), плавное появление только плавно увеличивается до 0,5 (50).

Итак, что я могу использовать по умолчанию для объекта, который позволит функции .fadeIn () работать?

Спасибо!


person Nate    schedule 18.09.2010    source источник
comment
Если вы используете только display:none, fadeIn() должно работать. Вот пример: jsfiddle.net/n7FzR/1   -  person user113716    schedule 18.09.2010
comment
Вы уверены, что не пытаетесь fadeIn быть потомком элемента, к которому вы прикрепляете эти стили?   -  person Yi Jiang    schedule 18.09.2010


Ответы (2)


Код с рабочей версией

HTML

<html>
    <body>
        <p>test</p>
    </body>
</html>

jQuery

$(document).ready(function() {
 $('p').fadeTo('slow', 1, function() {
      // Animation complete.
    });
});

CSS

p {
    display:none;
    opacity:0.0;
    filter:alpha(opacity=0);
}
​

Живая демонстрация

http://jsfiddle.net/2p2v4/

person Pramendra Gupta    schedule 18.09.2010
comment
В зависимости от вашего макета вы можете не захотеть начинать с display:none;, и, к счастью, это работает без него. - person Doug Kavendek; 22.06.2012

вы можете использовать написанное ниже или просто добавить свой код внизу страницы

.fadeInOnLoad
{
  display:none;
}

      <div class="fadeInOnLoad">iam visible after page is loaded</div>

      jQuery(function(){
           // your fade in code, call it after dom is ready
            jQuery('.fadeInOnLoad').fadeIn();
        });

я думаю твоя проблема

  • вы вызываете исчезновение до того, как элементы dom будут созданы в браузере

  • или используя jQuery, версию Visual Studio, насколько я помню, была некоторая ошибка в непрозрачности jQuery в версии Visual Studio

person Praveen Prasad    schedule 18.09.2010