提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery实现动画效果的简单实例

jQuery实例动画 实现 简单 效果
2023-06-13 09:15:16 时间

一、需求原因
目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。

二、具体实现

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jQuery实现动画效果</title>
<scriptlanguage="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<styletype="text/css">
    #test{
        position:relative;
        width:100px;
        height:100px;
        border:1pxsolid#0050d0;
        background:#96e555;
         cursor:pointer;
    }
</style>
<scripttype="text/javascript">
    $(function(){
        $("#test").css("optcity","0.5");//设置不透明
        $("#test").click(function(){
             $(this).animate({left:"400px",height:"200px",opacity:"1"},300)
                     .animate({top:"200px",width:"200px"},300)
                     .fadeOut("slow");
        });
    });
</script>
</head>
<body>
    <divid="test"></div>
</body>
</html>

三、运行结果

相关文章