Анимация в несколько этапов
Как правильно делать анимацию в несколько этапов?
Допустим я хочу что бы блок вначале поехал влево, потом вправо, потом вниз. Как лучше всего это реализовать? Правильно ли делать очередность анимаций вкладывая их в колбэки анимации?
$('.block').animate({'left':'100px'},400,function(){
$('.block').animate({'top':'200px'},400,function(){
и так далее...
});
});
Или все же лучше через переменную и интервал, и при завершении что бы очищала интервал и запускала другую функцию с интервалом? И еще вопрос... Допустим я хочу что бы эта функция сработала только тогда когда пользователь прокрутил скролл ниже на 1000px. Просто если написать if (scrollTop >= 1000){}, тогда оно будет ее все время повторять при прокрутке скрола дальше, а мне нужно что бы как только 1000 и больше, играет анимация 1 раз в не зависимости крутит скролл дальше пользователь или нет. Пробовал так.
var animStart = 0;
$(window).on('scroll',function(){
if(scrollTop >= 1000){
animStart = 1;
}
if(animStart == 1){
анимация..
}
});
Правильно ли это? или как лучше? (вроде бы в хроме норм отработала анимация, а в ИЕ непонятно что получилось)) Помогите пожалуйста. |
колбэки анимации правильный и понятный способ для последовательной анимации
|
Можно просто писать подряд.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: blue; position: absolute;"></div>
<script>
$("div").animate({'left':'100px'},400).animate({'top':'50px'},400);
</script>
</body>
</html>
jQuery сам отложит. |
Хорошо. Но что делать с scrollTop? Как сделать так что бы после того как пользователь прокрутил на 1000 пикселей, запустилась анимация один раз в не зависимости от того, крутит пользователь дальше или нет, так как я понял что если ставить на событие скролл, оно будет все время запускать ее снова и снова?
|
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: blue; position: absolute;"></div>
<script>
var animate_div = true;
$(window).scroll(function() {
if (window.animate_div && $(window).scrollTop() >= 10)
{
$("div").animate({'left':'100px'},400).animate({'top':'50px'},400);
window.animate_div = false;
}
});
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
|
ааа.. сбрасывать значение.. точно.. Спасибо!
|
Еще вопрос))
В ие8 при анимации пнг становится с черной обводкой... Если задать картинке фон конкретный, тогда все найс.. но мне нужно прозрачный.. Пробовал использовать фильтр(градиент), ничего не изменилось... Кто знает как решить проблему? |
| Часовой пояс GMT +3, время: 13:26. |