jq 动画

hide()/show()

       var flag= 1;
       $(".btn:first").click(function () {
           flag *= -1;
           if(flag == "-1"){
               // 目标.hide()  让目标隐藏(修改的display属性)
               // 小括号中,可是设置动画执行的时间
               $(".box").hide('slow');
           }else{
               // 目标.show()  让目标显示
               // 小括号中,可以设置动画执行的时间
               $(".box").show(5000);
           }
       })

目标.toggle()

       $("#taggle").click(function () {
           // 会先进行目标的属性,如果是显示,就设置为隐藏
           //                   如果是隐藏,就设置为显示
           $(".box").toggle(2000);
       });

淡入

        $(".btn:eq(1)").click(function () {
            $(".box").fadeIn(2000);
        })

谈出

       $(".btn:eq(2)").click(function () {
           $(".box").fadeOut(2000);
       })

淡入/淡出

       $(".btn:eq(3)").click(function () {
           $(".box").fadeToggle(2000);
       })

渐变到指定的透明度

       $(".btn:eq(4)").click(function () {
           //参数1 : 执行的时间
           //参数2 :  指定的透明度
           $(".box").fadeTo(2000,0.3);
       })

滑入

       $(".btn:eq(5)").click(function () {
           $(".box").slideDown(2000);
       });

滑出

       $(".btn:eq(6)").click(function () {
           $(".box").slideUp(2000);
       });

滑入/滑出

       $(".btn:eq(7)").click(function () {
           $(".box").slideToggle(2000);
       });
发布了96 篇原创文章 · 获赞 26 · 访问量 7298

猜你喜欢

转载自blog.csdn.net/weixin_46146313/article/details/104173619
jq