Пример:
Нажмите кнопку button чтобы анимировать элемент div с различным числом свойств.
"jQuery"
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
"HTML"
<button id="go">Запуск анимации</button> <div id="block">Привет!</div>
"CSS"
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
</head>
<body class="iframe">
<button id="go">Запуск анимации</button>
<div id="block">Привет!</div>
</body>
</html>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
Пример:
Показать элемент div с относительм движением. Нажимайте определенное время по кнопкам, просматривая относительную анимации, поставленную в очередь.
"jQuery"
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
"HTML"
<button id="left"></button> <button id="right"></button> <div class="block"></div>
"CSS"
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
});
</script>
</head>
<body class="iframe">
<button id="left"></button> <button id="right"></button>
<div class="block"></div>
</body>
</html>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
Пример:
Анимировать все параграфы переключая высоту (height) и прозрачность (opacity), выполнение анимации займёт 600 мс.
Пример:
Анимировать все пеараграфы, установив левый отступ 50 и свойство opacity 1 (непрозрачным, видимым), анимация выполняется в течении 500 миллисекунд.
Пример:
Пример использования параметра функции easing, обеспечивающего различный стиль анимации. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию. Учтите, данный код ничего не будет делать пока элемент скрыт (hidden).