「jQuery系列」jQuery 效果详解

在jQuery中，有许多内置的方法可以用来制作各种动画和效果。以下是一些常见的jQuery效果和它们的使用方法：

1. 显示和隐藏元素

$("#element").show(); // 显示元素
$("#element").hide(); // 隐藏元素

2. 淡入和淡出效果

$("#element").fadeIn(); // 淡入效果
$("#element").fadeOut(); // 淡出效果

3. 滑入和滑出效果

$("#element").slideDown(); // 滑下效果
$("#element").slideUp(); // 滑上效果

4. 动画效果

$("#element").animate({
    width: '200px',
    height: '200px',
    opacity: 0.5
}, 1000); // 自定义动画，参数为CSS属性和值，持续时间

5. 延迟执行效果

$("#element").delay(1000).fadeIn(); // 在1000毫秒后执行fadeIn效果

6. 循环播放动画

$("#element").animate({
    width: '200px'
}, 1000).animate({
    height: '200px'
}, 1000).animate({
    opacity: 0.5
}, 1000, function() {
    // 循环执行动画
    $(this).delay(1000).animate({
        width: '100px',
        height: '100px',
        opacity: 1
    }, 1000, arguments.callee);
});

7. 停止动画

$("#element").stop(); // 停止当前所有动画
$("#element").stop(true); // 清除动画队列，并停止当前动画
$("#element").stop(true, true); // 跳到动画的末状态，并清除队列

这些是jQuery中常用的一些动画效果，可以根据需要选择合适的方法来制作网页动画。