2015-04-23
459
Используется для скольжения элемента вниз.
Синтаксис:
$(selector).slideDown(speed);
Необязательный параметр скорости определяет скорость скольжения, и может принимать следующие значения: "slow", "fast" или в миллисекундах.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{ padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel {
padding:50px; display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Метод animate()
Animate() используется для создания пользовательской анимации.
Синтаксис:
$(selector).animate({params},speed,callback);
Обязательный params определяется параметрами CSS-свойств для анимации. Необязательный параметр speed определяет длительность эффекта. Он может принимать следующие значения: "slow", "fast", или в миллисекундах. В следующем примере показан простой вариант использования метода, он перемещает элемент <div> влево, пока он не достиг значения свойства left=250px:
|
|
|
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({ left: '250px' });
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
</body>
</html>
