Подскажите как переделать jquery .animate
как сделать, что бы код1 работал также как код2...в первом все понятно, во втором запутанно. Но второй работает, как надо, а первый не совсем. А конкретно вторая обратная анимация стартует не с конца первой а с нулевой позиции(которая была до старта первой анимации)...Заранее спасибо за помощь новичку :victory:
код1:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="jq/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div class="item" id="box">
<img src="images/k1.jpg" height="1330" width="991" alt="zz"/>
</div>
<script>
$(document).ready(function(){
$('img').animate({'zoom':0.5,'right':500},{duration:3000}).delay(2000).animate({'zoom':1,'left':500},{duration:3000});
});
</script>
</body>
</html>
код2:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="jq/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div class="item" id="box"> <img src="images/k1.jpg" height="1330" width="991" />
</div>
<script>
var move = 500;
zoom = 0.4;
time = 3000;
function Func2()
{
$('img').animate({'zoom':0.7,'right':move/3},{duration:time});
}
function Func1()
{
setTimeout (function(){
Func2()}, 0);
$('img').animate({'zoom':zoom,'left':move},{duration:time});
}
$(document).ready(function(){
Func1();
});
</script>
</body>
</html>
|
demon407,
прочитайте документацию по animate и добавьте вторую анимацию в complete первой Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
не работает....не понимаю где ошибка
$(document).ready(function(){
$('img').animate({'zoom':0.5,'right':500},{duration:3000},function(){this.animate({'zoom':1,'left':500},{duration:3000});
});
});
|
и так не работает
$(document).ready(function(){
$('img').animate({'zoom':0.5,'right':500},{duration:3000},{complete:function(){this.animate({'zoom':1,'left':500},{duration:3000});
}});
});
|
demon407,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img {
position: absolute;
cursor: pointer;
left: 0px;
zoom: 3;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(function() {
$('img').animate({
'zoom': 0.5,
'left': 500
}, {
duration: 3000,
complete: function() {
$(this).animate({
'zoom': 1,
'left': 0
}, {
duration: 3000
});
}
});
});
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
</body>
</html>
|
Спасибо)!...я пробовал, этот код но он не заработал у меня из за таблицы стилей.Благодаря Вам я это сразу увидел.
|
если не сложно может еще подскажете почему при выполнении такого кода:
$(window).load(function() {
$('img').animate({'zoom':0.5,'right':500},{duration:3000});
$('img').animate({'zoom':1,'left':500},{duration:3000});
$('img').attr("src","images/k2.jpg") ;
});
анимации проигрываются последовательно, а смена атрибута параллельно? можно ли это сделать так же удобночитаемо, а не писать в "complete:"? |
demon407,
animate это процесс во времени ... из анимаций формируется очередь ...первый тик анимации выполнился и когда анимация ждёт своего мгновения выполнится снова(спит) браузеру надо чем-то занятся, вот он атрибут и зафигачит :) и ещё кучу разных дел ... время подошло (будильник брякнул) сдедующий тик анимации и спит отдыхает или чего полезное делает и т.д нужно окончание анимаци тогда только complete или callback (что тоже самое, только синтаксис другой) |
смысл кажется уловил...это разные потоки...и анимацию1 и анимацию2 он не делит на разные потоки...получается очередь...а вот атрибут он пихает в отдельный поток и получается параллельно....спасибо
|
| Часовой пояс GMT +3, время: 02:30. |