Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   как с помощью animate() создать движение кнопки в правый верхний угол? (https://javascript.ru/forum/jquery/47346-kak-s-pomoshhyu-animate-sozdat-dvizhenie-knopki-v-pravyjj-verkhnijj-ugol.html)

katiandra4ka 19.05.2014 21:45

как с помощью animate() создать движение кнопки в правый верхний угол?
 
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/myscript1.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<button id="box">Анимация!</button>
</body>
</html>

$(function(){
$("#box").click( function() {
$(this).animate({
right: '+=100',
bottom: '-=100',

// width: '150px', // изменение ширины кнопки на 50%
//opacity: 0.5, //изменение прозрачность до 0,5
},3000);
});

рони 19.05.2014 22:25

katiandra4ka,
:-?
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    padding: 0px;
    margin: 0px
  }

  #box{
      width: 150px; height:50px; position: relative; left: 100px; top: 200px;
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
   $("#box").click( function() {
 var right = $(window).width()- this.getBoundingClientRect().right;
 $(this).animate({
 top: '0',
 left: '+='+right
 },3000); })
})
  </script>
</head>

<body>
<button id="box">Анимация!</button>
</body>
</html>


Часовой пояс GMT +3, время: 07:21.