靡语IT: JQuery-JavaScript代码库-动画篇

// 使用jQuery实现淡入淡出动画
$(document).ready(function() {
    // 当点击按钮时，触发淡入淡出动画
    $("#fadeinout").click(function() {
        $("#div1").fadeToggle("slow", "linear"); // 使用线性动画，慢速淡入淡出
    });
});
 
// 使用jQuery实现滑入滑出动画
$(document).ready(function() {
    // 当点击按钮时，触发滑入滑出动画
    $("#slideinout").click(function() {
        $("#div2").slideToggle("slow"); // 慢速进行滑入滑出
    });
});
 
// 使用jQuery实现自定义动画
$(document).ready(function() {
    // 当点击按钮时，执行自定义动画
    $("#customanim").click(function() {
        $("#div3").animate({
            left: '250px', // 动画结束时，元素的left属性值
            opacity: '0.5', // 动画结束时，元素的透明度
            height: '150px', // 动画结束时，元素的高度
            width: '150px' // 动画结束时，元素的宽度
        }, 'slow'); // 慢速执行自定义动画
    });
});

这段代码展示了如何使用jQuery库中的fadeToggle(), slideToggle()和animate()方法来实现各种动画效果。通过点击相应的按钮，可以触发对应的动画，并且每个动画都有不同的效果和时长设置。