JavaScript — Fade in Animations
Так. Я пытался создать простой фрагмент текста, который исчезает при загрузке страницы. Я много слышал о переполнении стека, а также обдумал это:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein
Я даже изучил использование window.onload, не говоря уже об этом:
<body onload="$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);">
Но затухание не сработает. Текст никогда не отображается.
У меня есть непрозрачность для элемента, установленного в 0 (с помощью CSS).
<script type="text/javascript">
$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);
</script>
Одна вещь моар: текст, который находится внутри <p class="desktoptheme"></p> тег генерируется с помощью PHP. Может быть так, что PHP на стороне сервера, а JavaSciprt на стороне клиента. Если так, что я использую? Задержка? AJAX?
Какие-нибудь мысли?
Решение
При использовании jQuery вы всегда захотите поместить свой манипулирующий код DOM в jQuery .ready(function())или ваш код будет запущен до того, как страница была успешно загружена
Пример:
<script type="text/javascript">
$( document ).ready(function() {
$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);
});
</script>
Для более элегантного решения, вы также можете рассмотреть возможность использования CSS-анимации, чтобы получить тот же эффект.
Проверять, выписываться эта ссылка для получения дополнительной информации о затухании в элементах с помощью CSS.
Чтобы разместить содержимое на стороне сервера на странице, отображаемой с помощью PHP, при условии, что ваш текст доступен до загрузки страницы, вам просто нужно отобразить переменную, смешанную с вашим HTML.
Пример:
<p class="desktoptheme"><?php echo "Hello world"; ?></p>
Другие решения
Любой текст, который вы вставляете в свой элемент с помощью PHP, уже будет присутствовать при запуске javascript — как вы сказали, PHP на стороне сервера, javascript на стороне клиента. Так что вам не нужно беспокоиться об этом.
Я вижу, вы используете JQuery, поэтому вы должны смотреть на $(document).ready(), Эта функция выполняет некоторый JavaScript после завершения загрузки страницы. Например:
JS:
$(document).ready(function() {
$('.fadein').animate({'opacity' : 1}, 700);
})
HTML:
<p class='fadein'>
This is some text that will fade in.
</p>
CSS:
.fadein {
opacity: 0;
}
Вот JSFiddle, так что вы можете поиграть с ним еще немного. Обратите внимание, что класс абзаца (fadein) должен соответствовать вашему селектору jQuery $('.fadein') и ваш селектор CSS .fadein,
У меня есть функция, которая делает именно это. Он немного похож на jQuery fade (), но это стандартный JavaScript, и его можно использовать как с функцией обратного вызова, так и без нее.
/* fade.In(), fade.Out():
el = element object
dur = duration milliseconds
fn = callback function
*/
var fade = {
In: function(el, dur, fn) {
var time = Math.round(dur / 10);
function fader(t, e, v) {
if (v < 1) {
e.style.opacity = v;
setTimeout(function () {
fader(t, e, parseFloat((v += 0.1).toFixed(2)));
}, t);
} else {
e.style.opacity = '1';
if (fn) fn();
}
}
if (el.style.display === 'none') el.style.display = 'block';
el.style.opacity = '0';
fader(time, el, 0);
},
Out: function(el, dur, fn) {
var time = Math.round(dur / 10);
function fader(t, e, v) {
if (v > 0) {
e.style.opacity = v;
setTimeout(function () {
fader(t, e, parseFloat((v -= 0.1).toFixed(2)));
}, t);
} else {
el.style.opacity = '0';
e.style.display = 'none';
if (fn) fn();
}
};
fader(time, el, 1);
}
};
/* Usage */
var elem1 = document.getElementById('id1');
var elem2 = document.getElementById('id2');
// fade in with callback
fade.In(elem1, 500, function() {
// ... do something after fade in ...
});
// fade out without callback
fade.Out(elem2, 666);
Лучше всего подходит для относительно быстрых переходов: c.500ms + | — 200 (ish).
Для ваших целей просто позвоните fade.In() функция на выбранном элементе при загрузке страницы.
Надеюсь, что это помогло. 🙂
Проверять, выписываться animate.css. Поместите это в свою голову:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css">
Затем добавьте
анимированный исчезать
в ваш класс:
<p class="desktoptheme animated fadeIn"></p>
Если вы хотите анимировать при прокрутке элемента WOW.js
я мог бы высоко рекомендуем использовать библиотеку JS под названием скорость помочь с анимацией CSS.
Если я буду следовать за вами правильно, это будет выглядеть примерно так …
CSS
p.desktoptheme {
display: none;
opacity: none;
}
JQuery
$(function(){
$('p.desktoptheme').velocity('fadeIn', {
'duration': 300,
'delay': 1000,
'complete': function(){
// all done!
}
});
});