jQuery 基本效果

Posted 2020-10-11

//            隐藏 
            $(this).hide()
//            显示
            $(this).show()
//            隐藏和显示  切换 （speed时间可以自定义)
            $(this).toggle()
//            淡入
            $(this).fadeIn()
//            淡出
            $(this).fadeOut()
//            淡入淡出   切换    （speed时间可以自定义)
            $(this).fadeToggle()
//            变透明    slow缓慢 , fast快速   （speed时间可以自定义)
            $(this).fadeTo("slow",0.5)
//            向下滑动
            $(this).slideDown()
//            向上滑动
            $(this).slideUp()
//            向上,向下滑动切换     （speed时间可以自定义)
            $(this).slideToggle()
//            动画        必需的 params 参数定义形成动画的 CSS 属性。
//                    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//                    可选的 callback 参数是动画完成后所执行的函数名称。
            $(this).animate({params},speed,callback)
            
            $(this).animate({
                left:‘250px‘,
                opacity:‘0.5‘,
                height:‘150px‘,
                width:‘150px‘},speed,callback)
//            animate 使用相对值,在值的前边加上"+="或"-="
            $(this).animate({
                left:‘250px‘,
                height:‘+=150px‘,
                width:‘+=150px‘
             });    
//            animate  几乎可以使所有的css样式变化,包括文字等一些...
            $("button").click(function(){
              var div=$("div");
              div.animate({left:‘100px‘},"slow");
              div.animate({fontSize:‘3em‘},"slow");
            });
//            停止动画 stop() （stop()方法几乎适应所有的jQuery效果函数，包括滑动，淡入，淡出任何排入队列的动画）
            $(this).stop()