jQuery 学习总结（二）页面特效

最新推荐文章于 2021-01-19 15:01:23 发布

原创最新推荐文章于 2021-01-19 15:01:23 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文介绍使用jQuery实现的各种动画效果，包括元素高度与透明度切换、移动及尺寸变化等。通过点击按钮来触发不同动画，例如元素大小的变化、字体大小调整及边框宽度变化等。

在600毫秒内切换段落的高度和透明度

$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");

移动效果

$(function() {
    //向左移动
    $("#left").click(function() {
        $(".block").show();
        $(".block").animate({
            width: "+200px",
            height: "+200px",
            fontSize: "1em",
            borderWidth: 10
        },
        "slow", "swing");
    });
    //向右移动
    $("#right").click(function() {
        $(".block").show();
        $(".block").animate({
            width: "-200px",
            height: "-200px",
            fontSize: "10em",
        },
        "slow", "swing");
    });
    /* 
$("p").animate({ 
    height: '200px', opacity: 'toggle' 
}, "slow"); 
$("p").animate({ 
    left: 50, opacity: 'show' 
}, 500); */
    //先渐隐 
    $("p").animate({
        opacity: 'toggle'
    },
    "slow", "swing");
    //后显示 
    $("p").animate({
        opacity: 'show'
    },
    500,
    function() {
        alert('加载完成');
    });
});

// 在一个动画中同时应用三种类型的效果

$("#go").click(function() {
    $("#block").animate({
        width: "90%",
        height: "100%",
        fontSize: "10em",
        borderWidth: 10
    },
    1000);
});