2021-03-10

最新推荐文章于 2021-11-21 12:10:25 发布

峰峰爱流口水

最新推荐文章于 2021-11-21 12:10:25 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/weixin_49759457/article/details/114648903

版权

动画效果

 <script src="./jquery-1.11.1.min.js"></script>
    <script>
        $(function(){


            //传两个函数，就不会自动显示或隐藏，而是第一次点击执行第一个函数，第二次点击执行第二个函数
            // $("#topicList h3").toggle(function(){
            //     console.log(1111);
            // },function(){
            //     console.log(222222222222);
            // })


            //切换效果，两个参数，都是函数，第一次点击执行第一个，第二次点击执行第二个
            //1.83支持
            // $("#topicList h3").toggle(function(){
            //     //获取UL
            //     var ul = $(this).next("ul");
            //     //如果隐藏就设置显示，如果显示就设置隐藏

            //     //直接显示
            //     // ul.show();
            //     // ul.show(1000);

            //     //1秒显示完成，弹窗，
            //     ul.show(1000,function(){
            //         alert("加载完成")
            //     })

            // },function(){
            //     var ul = $(this).next("ul");
            //     //如果隐藏就设置显示，如果显示就设置隐藏
            //     // ul.hide();
            //     // ul.hide(1000);
            //     //1秒后隐藏完成
            //     ul.show(1000,function(){
            //         alert("隐藏完成")
            //     })
            // });
            // $("#topicList h3").click(function(){
            //     //如果是隐藏就显示，如果是显示就隐藏
            //     $(this).next("ul").toggle("1000");
            // })

            // //淡入淡出 fadeToggle  fadeIn fade
            // $("#topicList h3").click(function(){
            //     $(this).next("ul").fadeToggle(1000);
            // })

             //滑动 划出 slideUP slideDown slideToggle
             $("#topicList h3").click(function(){
                 //this的下一个
                //  var s = $(this);
                //  console.log(s);
                $(this).next("ul").slideToggle(1000);
            })

        });


    </script>

<body>
    <div id="topicList">
        
        <h3>
            <span>今日热搜</span>
        </h3>
        <ul>
            <li>微博热搜，舆情，大数据，流量，金钱，3月8妇女节  </li>
            <li>发展。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</li>
            <li>北京：东城区推出新冠疫苗接种线上统一预约平台，可通过微信小程序"声智健康"预约；</li>
            <li>继《李焕英》宣布延长上映至4月11日后，《唐探3》也宣布将延长至4月10日；</li>
            <li>杭州：第三方房源平台不得挂牌未核验房源，目前已下架660余套；</li>
            <li>、成都多部门：脏车禁止进入成都5+2主城区，将在城区及主要出入城通道进行执法检查；</li>
            <li>3月9日，中俄两国正式签署合作建设国际月球科研站谅解备忘录，将联合推动国际月球科研站广泛合作；。</li>
            <li>全国人大代表：建议普通高中录取率提至80%以上，家长：希望提高到95%以上；</li>
            <li>3月8日菲律宾一市发生枪击事件，包括市长和2名警察在内5人身亡。菲司法部已下令调查此案；</li>
        
        </ul>
    </div>


</body>

效果

自定义动画

<script src="./jquery-1.11.1.min.js"></script>
    <script>
        //自定义动画可以做到链式调用
        $(function () {
            $("#go").click(function () {

                //1 animate原理：由原始状态，到达一个目的状态， 
                // 三个参数 1 目标状态（z最终是什么效果） 2 多久完成  3完成后的回调函数也可以没有


                // $("#block").animate({
                //     width: "200px",
                //     height:"200px",
                //     //大写fontSize属性要把-改为首字母大写
                //     fontSize:"50px"

                //     //链式调用
                // },1000).animate({
                //     width: "100px",
                //     height:"100px",
                //可以加"font-size"" 加引号
                //     fontSize:"50px"


                // },1000)


                // //透明度渐变
                // $("#block").css({
                //     "opacity": 0
                // }).animate({
                //     "opacity": 1,
                //     width:"200px"
                // }, 5000)



                //更改位置  设置绝对定位
                // $("#block").css({
                //     "position": 'relative'
                // }).animate({
                //     "left": '100px',
                //     width: "200px"
                // }, 1000)
                //切换鲜果
            //    $("#block").css({
            //         "position": 'relative'
            //     }).animate({
                   
            //         width: "toggle",
            //         opacity: "toggle"
            //     }, 1000)


            //不能设置颜色
            // $("#block").animate({
            //     backgroundColor : "green"
            //     }, 1000)

            //抖动定位
            $("#block").css({
                    "position": 'relative'
                }).animate({
                    left:"10px",
                    opacity:0.8
                   
                }, 100).animate({
                    left:"10px",
                    opacity:0.6
                   
                }, 100).animate({
                    left:"10px",
                    opacity:0.4
                   
                }, 100).animate({
                    left:"10px",
                    opacity:0.2
                   
                }, 100)

            });
        });

    </script>

元素操作

  <script src="./jquery-1.11.1.min.js"></script>
    <script>

        //Append追加   尾部追加元素，添加为子标签
        //$('#div').append(p);  追加在div的内部为子标签
        $(function () {
            $("#btn").click(function () {
                //内部的尾部追加  append

                // $("#dv").append("<p>子节点<p/>");
                // //把h4剪切插入到dv的内部的尾部
                // $("#dv").append($("h4"));
                // //把dv剪切插入到dv2内部的尾部，和上面的相反
                // $("#dv").appendTo($("#dv2"));

                // //首部添加 
                // $("#dv").prepend("<p>子节点<p/>");
                // //把h4剪切插入到dv的内部的首部
                // $("#dv").prepend($("h4"));


                // //after平级插入元素后面
                // $("#dv").after("<p>子节点<p/>");
                // //把h4剪切插入到dv的内部的后面
                // $("#dv").after($("h4"));

                 //Before平级插入元素前面面
                 $("#dv").before("<p>子节点<p/>");
                //把h4剪切插入到dv的内部的前面
                $("#dv").before($("h4"));
                



                $("h4").remove();


                $("#dv").empty;
            });
        });

        //prepend头部添加元素


        //After平级关系，插入到你后面




    </script>

峰峰爱流口水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-10

动画效果 <script src="./jquery-1.11.1.min.js"></script> <script> $(function(){ //传两个函数，就不会自动显示或隐藏，而是第一次点击执行第一个函数，第二次点击执行第二个函数 // $("#topicList h3").toggle(function(){ // console.log(111
复制链接

扫一扫