- 4 years ago
- Zaid Bin Khalid
- 14063 Views
-
11
In this session, you will learn Animation & Slide Methods and how to animate CSS properties. Moreover, how to create a slide motion effect using jQuery with the help of an example.
jQuery animate ( ) Method
The method used to create custom animations called the jQuery animate ( ) method. This type of method used to animate numeric CSS properties, like, width, height, margin, opacity, top, left, and padding, etc.
Syntax
The basic syntax of the jQuery animate ( ) method mention below:
$(selector).animate({ properties }, duration, callback);
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
At Once- Animate Multiple Properties
The animate ( ) method used to animate multiple properties of an element together at the same time.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
Animate Multiple Properties One by One Animation or Queued Animations
The jQuery Chaining feature method used to animate the multiple properties of an element one by one in a queue. In the next session, we will learn about the chaining features.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>
Animate Properties with Relative Values
If a value is specified with a leading (+= or -=) prefix. You can define the relative values for the animated properties. The target value is calculated by adding or subtracting the given number from the current value of the animate property.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>
Animate Properties with Pre-defined Values
In addition, each property can take the strings ‘show’, ‘hide’, and ‘toggle’, to the numeric values. This is very helpful in a work situation. You want to animate the property from the current value to the initial value and vice versa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>
Smooth Scroll to Top with JQuery animation
You can also create a smooth scroll to top button without CSS using jQuery animate ( ) method. For sliding the complete element you can use sliding methods of jquery Animation & Slide Methods both are very useful for a smooth transition.
Consider the below example scroll to Top with the animate() method.
<button type="button" id="backToTop">Top</button>
<script>
$(document).ready(function(){
$('#backToTop').on('click',function(){
$("html, body").animate({
scrollTop: 0
}, "slow");
});
});
</script>
jQuery slideUp () and slideDown () Methods
The slideUp ( ) and slideDown ( ) methods used to hide or show the HTML elements by gradually decreasing or increasing their height. You can easily slide the elements up or down.
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>
jQuery slideToggle () method
The method used to show or hide the selected elements by animating their height. This element displayed when it will be slide up. And if hidden, it will be slide down. This method termed as slideToggle ( ) method.
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
- 4 years ago
- Zaid Bin Khalid
- 14063 Views
-
11