jquery中css方法、动画方法

98 阅读1分钟

2.png

 // console.log($(".one").width());//获取宽度
    $(".one ").width(500);//设置宽度,不能加单位,本设置内容是行内容
    console.log($(".one ").innerwidth());//获得padding和width的宽度
    console.log($(" .one").outerwidth());//获得padding+width+border的度
    $(".div1").css({ "border": "solid 1px #fo0", "padding-left": "20px", "margir-left": "20px" });
    $(".div1").width(500);
    console.log($(".div1").innerwidth()); console.log($(".div1").outerwidth());

    console.log($(".b").offset());//offset () 返回值是对象,里面包含left和top
    $(".b").offset({ left: 150, top: 180 });//设置位置,需要left和top一起写
    //postion用法和offset一样
    $(".one").click(function () {
        console.log($(this).scrollTop());//单击one获得滚动条位置
        $(this).scrollTop(20);
    })
        
动画:
    hide(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态改变当前匹配元素的高度、宽度和不透明度,最终隐藏当前元素,此时元素的属性display修改为none。
    
     $(".one ").click(function () {
        $(this).hide(1000, function () {
            alert("one已经隐藏")
        });//1000ms,大小,透明度都逐渐变化。回调函数是在前面效果执行完成后执行的内容})
    })
    
    show(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);
    
    toggle (动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:会动态的改变当前元素的高度、宽度和不透明度,最终切换当前元素的可见状态。也就是说,如果元素是可见的,则被切换成隐藏状态;如果元素是隐藏的,则被切换为可见状态。
    
    fadeQut(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的不透明度(其他的不变),最终隐藏当前元素。此时元素的css属性修改为none。它的语法结构同hide()和show相同。
    
    fadeln (动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);
    
    fadeoggle(动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);
    
    fadeTo(;方法:会把当前元素动态的调整到指定不透明度(其他不变)。语法:fadeTo(动画的时间,不透明度);不透明度取0-1之间的值,0表示透明,1表示不透明。
    
    $(".one").click(function () {
        //$(this).children("div").toggle(1000); // show 和 hide的切换使用
        // $(this).children( "div" ).fadeout (1000); //从透明度上变化
        // $(this).children( "div" ).fadeToggle( 1000) ;
        $(this).children("div").fadeTo(1000, 0.6);//0.6代表的div opcity: 0.6,半透明效果
    })