Jquery学习(3)-特效函数

最新推荐文章于 2020-06-03 00:38:51 发布

敏儿啦

最新推荐文章于 2020-06-03 00:38:51 发布

阅读量148

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/xiaomin_er/article/details/106305477

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.val() size() each()

    <script>
        /* 
            val()  value 获取/设置表单元素的值
            size()  输出，获取网页元素的个数
            each()
         */
         $(function(){
            //  alert($("input").val()); //JQ取值只能取第一个符合条件元素的值
            // $("input").val("hello world"); //JQ赋值批量操作，会对所有获取到的元素进行赋值
            /* css()  attr()  html()  [注]都是批量操作 */

            // alert($("input").size());  //3
            // alert($("input").length);  //3

            $("input").each(function(index,item){
                // alert(item + ',' + index);
                // item.value=index;

                $(item).val(index);
            })
         })
    </script>

<body>
    <input type="text" value="aaa">
    <input type="text" value="bbb">
    <input type="text" value="ccc">
</body>

2.hover hide show slidedown fadeIn

    <style>
        div{width: 100px;height: 100px;}
        #div1{background-color: red;}
        #div2{background-color: blue;}
    </style>
    <script>
        /* 
        hover(funcOver,funcOut)  
        hide() 隐藏 
            第一个参数：动画持续的毫秒数
            第二个参数：回调函数，动画结束的时间执行的
        show() 显示    
            【注】动画效果是，从左上角收起和从左上角展开

        slideDown()
        slideUp()  动画效果是卷闸效果

        fadeIn()  淡入
        fadeOut() 淡出
        fadeTo(动画持续时间，透明度，回调函数)
         */
         $(function(){
             $("#div1").hover(function(){
                //  $(this).html("移入");
                // $("#div2").hide();
                /* $("#div2").hide(2000,function(){
                    $("#div1").html("移入");
                }) */

               /*  $("#div2").slideUp(2000,function(){
                    $("#div1").html("移入");
                }) */

               /*  $("#div2").fadeOut(2000,function(){
                    $("#div1").html("移入");
                }) */

                $("#div2").fadeTo(2000,0.5,function(){
                    $("#div1").html("移入");
                })
             },function(){
                //  $(this).html("移出");
                // $("#div2").show();
                /* $("#div2").show(2000,function(){
                    $("#div1").html("移出");
                }) */

               /*  $("#div2").slideDown(2000,function(){
                    $("#div1").html("移出");
                }) */

                /* $("#div2").fadeIn(2000,function(){
                    $("#div1").html("移出");
                }) */

                $("#div2").fadeTo(2000,1,function(){
                    $("#div1").html("移出");
                })
             })
         })
    </script>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

3.animate

    <style>
        div{width: 100px;height: 100px;}
        #div1{background-color: red;}
        #div2{background-color: blue;}
    </style>
    <script>
        /* 
           animate  默认的运动形式是  慢快慢
                匀速  "leaner"
                慢快慢  "swing"
            拓展更多animate的运动形式：
                引入 jquery-ui
            https://www.jqueryui.org.cn/demo/5735.html 查找动画特效  
            有了JQueryUI之后，addClass和removeClass就变成了增强版的方法 

            停止动画的函数
                小技巧：我们可以在每次调用animate之前先去调用以此stop关闭上一次定时器
            delay()延迟
         */
       /*  $(function(){
            $("#div1").hover(function(){
                $("#div2").stop(true).animate({
                    width:300,
                    height:300,
                    opacity:0.5
                },4000,function(){
                    $("#div1").html("移入");
                })
            },function(){
                $("#div2").stop(true).animate({
                    width:200,
                    height:200,
                    opacity:1
                },4000,function(){
                    $("#div1").html("移出");
                }) 
            })
 */
            /* $("#div1").click(function(){
                $("#div1").animate({
                    width:300,
                    height:300
                },4000,"linear");
                $("#div2").animate({
                    width:300,
                    height:300
                },4000)
            }) */

            $("#div1").click(function(){
                $("#div1").animate({width:300},2000).delay(4000).animate({height:300},2000);
            })
            $("#div2").click(function(){
                // $("#div1").stop(); //停止第一个动画，但是后续动画正常运动
                // $("#div1").stop(true); //停止所有动画
                // $("#div1").stop(true,true); //停止所有动画，并且将当前正在进行的动画，直接到达目的值
                $("#div1").finish(); //停止所有动画，并且将所有的动画都到达目的值
            })

        })
    </script>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

敏儿啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习(3)-特效函数

1.val() size() each() <script> /* val() value 获取/设置表单元素的值 size() 输出，获取网页元素的个数 each() */ $(function(){ // alert($("input").val()); //JQ取值只能取第一个符合条件元素的值 // $(
复制链接

扫一扫