вот моя проблема ... У меня есть этот сайт: LINK, анимация fadein обеих букв и imgs хранится в файле CSS, а финальная анимация fadeout написана в Javascript.Больше анимаций с задержкой
После исчезновения я хотел бы изменить цвет фона страницы с серого на черный с помощью анимации затухания, но я понятия не имею, как это сделать.
Если я установил больше задержек, анимация, похоже, не работает. Кто-нибудь может мне помочь?
EDIT: Вот код всей страницы индекса:
Следующие работал для меня:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="nuovissimo-codice.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#tutto").delay(1000).fadeOut(1000, function() {
$('body').animate({backgroundColor:'#000'}, 300);
});
});
</script>
<title>dyingnow</title>
</head>
<body style="background-color:#404040">
the rest goes here......
.fadeOut() может принять дополнительную функцию обратного вызова ...
$("#divs").delay(15000).fadeOut(1000, function() {
// any code here will run after .fadeOut() has completed...
$('body').css('background','#000');
});
Я создал jsFi ddle здесь http://jsfiddle.net/h2rtLp9q/
$(document).ready(function(){
$("#test").delay(1000).fadeOut(1000, function(){
$('body').css('background','#000');
});
});
Вот альтернатива написана с чистого CSS с использованием animation-delay. Вам может быть проще поработать, если вы не пытаетесь связать события с этими анимациями.
/* CSS */
body {
background: #000;
-webkit-animation: bodyColor 15s;
}
div {
width: 50%;
margin: 0 auto;
}
div div {
width: 100%;
height: 50px;
border: 1px solid black;
margin-bottom: 10px;
opacity: 0;
-webkit-animation: 8s fadeInOut;
}
div div:nth-child(2) {
-webkit-animation-delay: 1s;
}
div div:nth-child(3) {
-webkit-animation-delay: 2s;
}
div div:nth-child(4) {
-webkit-animation-delay: 3s;
}
div div:nth-child(5) {
-webkit-animation-delay: 4s;
}
@-webkit-keyframes fadeInOut {
50%, 80% { opacity: 1; }
0%, 100% { opacity: 0; }
}
@-webkit-keyframes bodyColor {
0%, 95% { background: #999; }
100% { background: #000; }
}<!-- HTML -->
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
вы можете проверить jsfiddle, она должна быть о вашей JQuery и jqueryui ссылки в заголовке? – renakre
Прошу прощения за последний комментарий, мне пришлось написать все заново;) BTW, я попробовал ваше предложение, но, похоже, я ошибался, потому что теперь анимация затухания не работает ... I введите эту строку в мой заголовок: и я отредактировал мой код например: window.onload = function() { $ ("# divs"). delay (15000) .fadeOut (1000, function() { \t $ ('body'). animate ({backgroundColor: '# 000 '}, 300); }) – xflea
@xflea вы можете поместить весь свой код в ori ginal post :) – renakre