Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.11.2013, 10:46
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Движение объекта с одной точки в другую точку.
Мне надо что бы в диве с одной стороны появлялась линия и, пересекая весь div горизонтально, изчезала (растворялась) на другом краю дива.

Я так понимаю, для этой задачи используется простой графический элемент, который меняет позицию? Есть у спецов в загашнике очередная ссылка на теорию или статью на эту тему?
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2013, 11:05
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Сообщение от Faab
появлялась линия и, пересекая весь div горизонтально, изчезала (растворялась) на другом краю дива
не градиент ли часом нужен?)
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2013, 11:53
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Вот более конкретноый вопрос: как оставить за этим самолётом шлейф (простая горизонтальная линия)?

<!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>

Последний раз редактировалось Faab, 18.11.2013 в 11:55.
Ответить с цитированием
  #4 (permalink)  
Старый 18.11.2013, 12:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

Сообщение от Faab
как оставить за этим самолётом шлейф
вариант ...
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 18.11.2013, 12:28
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

.. а линия это тот же див в 1пиксел. Благодарю!
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2013, 12:47
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

А можно в этот процес как-то вклиниться? Например когда ширина 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>

Последний раз редактировалось Faab, 18.11.2013 в 13:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно Ser12345678 jQuery 2 17.07.2012 12:18
Движение объекта за курсором Алексаднр Элементы интерфейса 2 23.10.2011 21:01
Движение объекта в ячейке определённого размера lammeR Общие вопросы Javascript 4 20.04.2010 17:14
движение объекта lammeR Общие вопросы Javascript 5 08.03.2010 01:04
Движение обЪекта Rusel6 Элементы интерфейса 2 14.08.2009 14:49