jQuery效果

编辑本博客

显示效果

show(speed,callback)

  • speed:三种预定义字符串之一(slow,normal,fast)或时间“毫秒”
  • callback:动画执行完后运行的函数,每个元素执行一次

hide(speed,callback)

  • 与show()方法类似

toggle(speed,callback)

  • 如果元素可见,切换为隐藏。如果隐藏,切换为可见
  • speed为执行时间
  • callback为回调元素,只执行一

slide效果

slideDown()

  • 通过高度变化(向下增大)来达到动态地显示所有匹配的元素,在显示完成后触发一个回调函数

slideUp()

  • 通过高度变化(向上减少)来达到动态地隐藏所有匹配的元素,在隐藏完成后触发一个回调函数

sildeToggle()

  • 通过高度变化,来切换所匹配元素的可见性,并在切换完成之后触发一个回调函数

fade效果

fadeIn

  • 通过对透明元素调整透明度的变化来达到淡入效果,在动画执行完成后执行回调函数,只调整透明度

fadeOut

  • 通过对不透明元素调整透明度的变化来达到淡出效果,在动画执行完成后执行回调函数,只调整透明度

fadeTo

  •  把匹配到的元素的透明度以渐进的方式调整到指定的透明度,并在动画完成后执行回调函数

fadeToggle

  • 通过不透明的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后执行回调函数。实现淡入淡出的效果就用此方法。只调整透明度,不调整宽和高

 动画

animate(params,speed,fn)

  • params:一组包含作为动画属性和终止的样式属性及其值的集合
  • speed:三种预定义速度之一的字符串('slow','normal','fast')或动画时长毫秒数值
  • fn:在动画完成后的函数,每个回调只执行一次

链式执行动画,多个animate连续执行

<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $("#box").animate({
                width:"200px",
                height:"200px",
                top:"135px",
                left:"100px"
            },1000).animate({
                width:"100px",
                height:"100px",
                top:"35px",
                left:"0px"
            },1000)
        })
    })
</script>
View Code

stop:停止所有在指定元素上进行的动画

  • clearQueue:True则清空队列,可以立即结束动画
  • gotoEnd:让当前正在执行的动画立即完成,重设show和hide原始样式,调用回调函数等

暂停动画执行

<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
            $("#box").animate({top:"135px",left:"100px"},5000);
        })
        $("#stop").click(function () {
            $("#box").stop();
        })
    })
</script>
View Code

delay:用来做延迟操作

  • delay(1000),一秒之后所做的操作

第一个动画执行完毕后,暂停3秒后,继续执行

<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
          $("#box").animate({width:"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000);
        })
    })
</script>
View Code

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            background-color: seagreen;
            position: absolute;/*就可设置top和left值*/
            line-height: 100px;
            top: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
<button id="str"></button>
<button id="stop"></button>
<div id="box">
    Hello!
</div>

</body>
<script type="text/javascript">
    $(function () {
        $("#str").click(function () {
            /*$("#box").animate({
                width:"200px",
                height:"200px",
                top:"135px",
                left:"100px"
            },1000).animate({
                width:"100px",
                height:"100px",
                top:"35px",
                left:"0px"
            },1000)*/
            $("#box").animate({width:"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000);
        })
        /*$("#stop").click(function () {
            $("#box").stop();
        })*/
    })
</script>
</html>
View Code

 小广告案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">
        #box{
            width: 300px;
            height: 240px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: none;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/advertising.jpg"/>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        $("#box").slideDown("normal").slideUp("flast").fadeIn(1000).click(function () {
            $(this).fadeOut(1000)
        })
    })
</script>
</html>
View Code

 

posted @ 2018-06-18 19:18  丫丫625202  阅读(131)  评论(0编辑  收藏  举报