Движение объекта с одной точки в другую точку.
Мне надо что бы в диве с одной стороны появлялась линия и, пересекая весь div горизонтально, изчезала (растворялась) на другом краю дива.
Я так понимаю, для этой задачи используется простой графический элемент, который меняет позицию? Есть у спецов в загашнике очередная ссылка на теорию или статью на эту тему? |
Цитата:
|
Вот более конкретноый вопрос: как оставить за этим самолётом шлейф (простая горизонтальная линия)?
<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
div#block {
position: absolute;
}
div#sky {
width: 300px;
height: 150px;
border: 3px blue solid;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
left: "240px",
}, "slow" );
});
});
</script>
</head>
<body>
<button id="go">Run</button>
<div id="sky">
<div id="block">
<img src="http://samara.turprofi.ru/forum/index.php?PHPSESSID=bc74bb8aa06fa9cb3f088effb3ec56c3&action=dlattach;attach=1852;type=avatar" />
</div>
</div>
</body>
</html>
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
div#block img{
float: right;
padding: 0px
}
div#sky {
width: 300px;
height: 150px;
border: 3px blue solid;
padding: 0px
}
div#block{
display: inline-block;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));
background: -webkit-linear-gradient(left, #fff, #000);
background: -moz-linear-gradient(left, #fff, #000);
background: -o-linear-gradient(left, #fff, #000);
background: -ms-linear-gradient(left, #fff, #000);
background: linear-gradient(left, #fff, #000);
background-color: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "300px",
}, "slow" );
});
});
</script>
</head>
<body>
<button id="go">Run</button>
<div id="sky">
<div id="block">
<img src="http://samara.turprofi.ru/forum/index.php?PHPSESSID=bc74bb8aa06fa9cb3f088effb3ec56c3&action=dlattach;attach=1852;type=avatar" />
</div>
</div>
</body>
</html>
|
.. а линия это тот же див в 1пиксел. Благодарю!
|
А можно в этот процес как-то вклиниться? Например когда ширина div#block будет равна 75px, запустить какое нибудь действие: например, установить алерт.
Добавил: Хотел решить это разделением одной функции animate() на две функции animate(), запущенные поочерёдно.. но видна "задержка" при вызове колбека. <!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
div#block {
position: absolute;
}
div#sky {
width: 300px;
height: 150px;
border: 3px blue solid;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
left: "75px",
}, "slow", null, function(){
// alert("other action");
$("#block").animate({
left: "240px",
}, "slow" );
} );
});
});
</script>
</head>
<body>
<h2>Test</h2>
<button id="go">Run</button>
<div id="sky">
<div id="block">
<img src="http://samara.turprofi.ru/forum/index.php?PHPSESSID=bc74bb8aa06fa9cb3f088effb3ec56c3&action=dlattach;attach=1852;type=avatar" />
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:09. |