How to use jQuery Animation Effects

Hello Nerds,

jQuery provides several built-in jQuery animation effects, which make it easy for us to use. It help us develop dynamic and interactive websites. Here i am explaining about jQuery animations effects.

jQuery animate() Method

jQuery animate() Method The jQuery animate() method is used to create custom animations. The animate() method is used to change any non-numeric css property, such as color, or background-color in jquery but we cannot use the basic jQuery functionality of animating properties like .getWidth(), because there are no numeric raw values to revert from.

Here’s a simple example of the jQuery animate() method that animates an image from its original position to the right by 300 pixels on click of the button.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Animate Multiple Properties At Once

Also, you can animate multiple properties of an element together using the animate() method. All properties played their animations together without delay.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Please note: With the animate() method you need to pass in camel-cased CSS property names (e.g. if you want to fade a font-size, write 'fontSize' instead of 'font-size'). eg for 'margin-left' write as 'marginLeft', for `border-width` writas be borderWidth and so on.

By using these jQuery Animation Effects example, you can make your websites attractive and intractive.

1. hide()

The hide() method hides the selected elements with an optional animation.

$("#element").hide(1000); // Hides the element after 1 second

2. show()

The show() method displays the selected elements with an optional animation.

$("#element").show(1000); // Shows the element after 1 second

3. toggle()

The toggle() method toggles the visibility of the selected elements.

$("#element").toggle(1000); // Toggles the visibility after 1 second

4. fadeIn()

The fadeIn() method fades in the selected elements by increasing their opacity.

$("#element").fadeIn(1000); // Fades in the element after 1 second

5. fadeOut()

The fadeOut() method fades out the selected elements by decreasing their opacity.

$("#element").fadeOut(1000); // Fades out the element after 1 second

6.fadeToggle()

The fadeToggle() method toggles the fading in and out of the selected elements.

$("#element").fadeToggle(1000); // Toggles the fade in/out after 1 second

7.slideDown()

The slideDown() method slides down the selected elements, making them visible.

$("#element").slideDown(1000); // Slides down the element after 1 second

8.slideUp()

The slideUp() method slides up the selected elements, making them hidden.

$("#element").slideUp(1000); // Slides up the element after 1 second

9.slideToggle()

The slideToggle() method toggles the sliding of the selected elements up and down.

$("#element").slideToggle(1000); // Toggles the slide up/down after 1 second

10.animate()

The animate() method allows you to create custom animations by changing CSS properties over time.

$("#element").animate({ left: '250px', opacity: 0.5 }, 1000); // Animates left position and opacity after 1 second

jQuery includes a number of animation effects that can add user attraction to your web pages. Many jQuery animation methods allow you to easily incorporate interaction and enchance the visual appeal of your web pages. These effects allow for smooth and captivating user experiences.

About Post Author

Kishan Kumar || Founder @ Appfinz

administrator

𝗦𝗵𝗼𝗽𝗶𝗳𝘆 𝗣𝗹𝘂𝘀 𝗘𝘅𝗽𝗲𝗿𝘁 | Digital Marketing Consultant (Organic & Paid Outreach) | Built 𝗔𝗽𝗽𝗳𝗶𝗻𝘇 𝗧𝗲𝗰𝗵𝗻𝗼𝗹𝗼𝗴𝗶𝗲𝘀 | Working with Graphics, Website & Performance Marketing Enthusiasts.
Ask for 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 | 𝐒𝐨𝐜𝐢𝐚𝐥 𝐌𝐞𝐝𝐢𝐚 𝐎𝐮𝐭𝐫𝐞𝐚𝐜𝐡 | 𝐆𝐨𝐨𝐠𝐥𝐞 𝐂𝐚𝐦𝐩𝐚𝐢𝐠𝐧𝐬 | 𝐋𝐚𝐫𝐚𝐯𝐞𝐥 & 𝐒𝐡𝐨𝐩𝐢𝐟𝐲 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭

See author's posts