jQuery元素的显示隐藏及动画

Posted 2020-08-15 李大白

    1.hide()    隐藏元素
        $("div").hide();
        
    2.show()    显示元素
        $("div").show();
        
    3.toggle() 可以切换元素显示与隐藏
        $("div").toggle();
    
    4.slideDown() 滑动显示,将隐藏的元素滑动显示出来。
        $("div").slideDown();
        
    5.slideUp() 滑动隐藏。
        $("div").slideUp();
        
    6.slideToggle() 滑动隐藏与显示切换
        $("div").slideToggle();
        
    7.fadeIn() 渐显。只用于隐藏的元素。
        $("div").fadeIn(2000);
        
    8.fadeOut() 渐隐。由"显示"状态改变透明度直接"隐藏"。只用到显示的元素。
        $("div").fadeOut(2000);
        
    9.fadeTo() 改变透明度。
        $("div").fadeTo(2000,0.4);
        
    10.fadeToggle 切换
        $("div").fadeToggle(2000);
        
    11.animate() 动画显示,参数中的属性必须是驼峰命名法。
        $("img").animate( {
                            width:"100%",
                            height:"100%",
                          },
                          1000
                        ); 
        
    12.stop() 停止动画
        $("img").stop();
        
    13.off 属性，跳过动画显示的过程，直接到最终效果。
        jQuery.fx.off = true;
        或
        $.fx.off = true;