Плавное появление из display:none скрипт для сайта

Использование скрипта плавного появления из display:none

В демо примерах используется значение 3000 устанавливающее время появления элемента в миллисекундах.

Плавное появление элемента при клике

После нажатия на ссылку элемент с изначально установленным значением display:none плавно появится в установленном месте.

► Нажмите на значёк в редакторе для показа результата.

<style> .block--none{display:none;opacity:0} </style> <a href="#" class="knopka">Показать текст плавно</a> <br> <div class="block--none"><p>Здесь текст который плано появится</p></div> <script> $(".knopka").click(function () { $(".block--none").css({display:'block'}).animate({opacity:'1'}, 3000) }); </script>

Плавное появление элемента при загрузке страницы

Элемент с установленным значением display:none плавно появится после загрузки страницы в установленном месте.

► Нажмите на значёк в редакторе для показа результата.

<style> .block--none{display:none;opacity:0} </style> <br> <div class="block--none"><p>Здесь текст который плано появится</p></div> <script> $(function () { $(".block--none").css({display:'block'}).animate({opacity:'1'}, 3000) }); </script>

Простое решение для манипуляции с невидимыми элементами страницы, советуем посмотреть материал с примерами скрипта плавного пропадания элемента.