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

最新推荐文章于 2021-10-22 17:16:38 发布

原创最新推荐文章于 2021-10-22 17:16:38 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍使用jQuery实现的各种动画效果，包括高度和透明度切换、元素尺寸变化及字体大小调整等。通过点击事件触发动画，实现了元素的动态展示效果。

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

   [js] 
   view plaincopy
$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");  

移动效果

   [js] 
   view plaincopy
$(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('加载完成');  
    });  
});  

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

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