Jquery下的动画方法概括

　　Jquery关于动画的方法常用的是show()、hide()、animate()等。

　　1.show()和hide()是一对，hide相当于css("display","none"),而show则相当与把css设成除null以外的值，一般是"block"、"inline"，当调用show时，就会根据hide方法记住dispaly的属性值来显示元素。

　　2.show(600)中还可以带参数，600毫秒中显示，相当于"slow"，"normal"=>400，"fast"=>200.

　　3.fadeIn()和fadeOut()是通过改变透明度直到css("display","none")来控制显示与隐藏的。

　　4.slideUp()和slideDown()是通过改变高度来实现显示与隐藏的。

　　5.animate()是最长用的一种动画显示方法，animate(params,speed,callback)3个参数中最后一个可以不填，第一个是样式属性和值的映射，第二个参数是动画速度，第三个参数是可选的在动画完成时执行的函数。

　　写了个小玩意，点击移动，css的圆角发现在ie9上实现有点困难。

　　用的代码很简单，直接新建个html界面复制就行了。　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            overflow: hidden;
        }
        .one
        {
            height: 60px;
            width: 60px;
            border: 1px solid yellow;
            background-color: Aqua;
            position: relative;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
        }
    </style>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div id="divBody" style="width: 100%; height: 100%; background-color: white; position: relative;">
        <div class="one" id="divMove">
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var divMoveJQ = $("#divMove");
    var divBodyJQ = $("#divBody");
    divBodyJQ.height($(window).height() - 30);

    //点击空白处
    $("#divBody").mousedown(function (e) {
        var Mouse = mousePos(e);
        var left1 = (Mouse.x - GetPosition(divBodyJQ).AbsoluteLeft - divMoveJQ.width() / 2).toString() + "px";
        var top1 = (Mouse.y - GetPosition(divBodyJQ).AbsoluteTop - divMoveJQ.height() / 2).toString() + "px";
        divMoveJQ.animate({ left: left1, top: top1 }, 600);
    });

    //鼠标位置
    function mousePos(e) {
        var x, y;
        var e = e || window.event;
        return {
            x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
            y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
        };
    };

    //自适应
    $(window).bind("resize", function () {
        divBodyJQ.height($(window).height() - 30);
    });

    //获取控件位置
    function GetPosition(Selector) {
        var SelectorJQ = $(Selector);
        var Position = {};
        if (SelectorJQ.length > 0) {
            var position = SelectorJQ.position();
            Position.RelativeTop = position.top;
            Position.RelativeLeft = position.left;

            var offset = SelectorJQ.offset();
            Position.AbsoluteTop = offset.top;
            Position.AbsoluteLeft = offset.left;
        }
        return Position;
    };
</script>
View Code

　　发现还是写点注释好，怕自己以后忘记了。。。。。

　　改变样式属性表

方法名

说明

 
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toggle() 用来代替hide()和show()
slideToggle() 代替slideUp()和slideDown()
fadeToggle() 代替fadeIn()和fadeOut()
animate() 自定义动画方法，
hide()和show() 同时改变多个样式属性即宽度高度不透明度

 

　　

posted @ 2013-08-23 14:34  戒一字  阅读(269)  评论(0)  编辑  收藏  举报