как по очереди прижимать объект влево,вправо
Доброго времени.
Надо сделать следующее: картинка сжимается вправо до 0px а потом разворачивается обратно, но опять с левой стороны вправо. И так бесконечно. Все анимации работают, но right:0 и left:0 по очереди программа не понимает. Пробовал и css и addClass removeClass - ничего не работает. Вот один из примеров:
var i=1,j;
function chisla (){
i++;
if(i%2>0){
j='left';
} else {
j='right';
}
$('#pic1').animate({j:'0','top':i},100,function(){
chisla();
});
}
chisla();
т.е. top:i - исправно работает и картинка ползет вниз. Как уметь прилеплять картинку к разным сторонам по очереди? Спасибо заранее! |
Вы просто представьте как это работает.
В фазе сжимания нужно одновременно уменьшать width и увеличивать left на такое же значение, а в фазе разжимания просто увеличивать width. Это если картинка position absolute. |
Да, спасибо, отличное решение :) СДелал так:
$('#pic1').animate({'width':'0px','left':'250px'},1500)
.animate({'width':'0px','left':'0px'},3000)
.animate({'width':'250px'},1500);
Работает. Но неужели не сделать никак проще? |
Куда уж проще.
Цитата:
<script type = "text/javascript">
window.onload = function(){
var img = document.getElementById("myimg"), open = true, width = 300, left = 0;
img.style.position = "absolute";
img.style.height = "100px";
(function(){
if(open){
img.style.left = left ++ + "px";
}
img.style.width = (open ? width -- : width ++) + "px";
if(width == 0){
open = false;
}
if(width == 300){
open = true;
}
window.setTimeout(arguments.callee, 10);
}())
}
</script>
<div class = "wrapper">
<img id = "myimg" src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
</div>
|
shaltay,
Вариант ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic1{position: relative; width: 336px; height: 76px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
(function(){
$('#pic1').animate({'width':'0px','left':'336px'},1500, function(){
$('#pic1').css({left:'0px'})} ).animate({'width':'336px'},1500 );
arguments.callee()
})()
});
</script>
</head>
<body>
<img id="pic1" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
</body>
</html>
|
poorking,
В функции left никогда не возращаеться в исходное положение поэтому картинка как гусеница убежит в право ... Исправленный вариант без jQuery ...
<img id = "myimg" src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<script type = "text/javascript">
var a = document.getElementById("myimg"),
b = !0,
c = 300;
a.style.position = "absolute";
a.style.height = "100px";
(function () {
a.style.width = (b ? c-- : c++) + "px";
if (c == 0 || c == 300) b = !b;
a.style.left = (b && 300 - c || 0) + "px";
window.setTimeout(arguments.callee, 10)
})();
</script>
|
рони,
так автор сказал Цитата:
|
Цитата:
http://shaspace.spb.ru/tripinadva_rect/ |
Цитата:
|
Цитата:
|
а зачем три раза функцию создавать друг в друге?
|
Цитата:
$(function() { // это функция = window.onload -- запуск после загрузки страницы
(function(){ //основная функция анимаци
$('#pic1').animate({'width':'0px','left':'336px'},1500, function(){ //функция возврата картинки на исходное место после 1 цикла анимации
$('#pic1').css({left:'0px'})} ).animate({'width':'336px'},1500 );
arguments.callee()
})()
});
|
А чем сложнее сделать цепную функцию, как у меня в коде, чем функцию в функции?
|
| Часовой пояс GMT +3, время: 13:21. |