Форум

katiandra4ka · #1 (**permalink**) 19.05.2014, 21:45

<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);
});

рони · #2 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript