美文网首页
jquery特殊效果

jquery特殊效果

作者: 冷暖自知_2237 | 来源:发表于2019-04-10 19:17 被阅读0次

    fadeIn() 淡入

        $btn.click(function(){

            $('#div1').fadeIn(1000,'swing',function(){

                alert('done!');

            });

        });

    fadeOut() 淡出

    fadeToggle() 切换淡入淡出

    hide() 隐藏元素

    show() 显示元素

    toggle() 依次展示或隐藏某个元素

    slideDown() 向下展开

    slideUp() 向上卷起

    slideToggle() 依次展开或卷起某个元素

    jquery链式调用

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    $('#div1') // id为div1的元素

    .children('ul') //该元素下面的ul子元素

    .slideDown('fast') //高度从零变到实际高度来显示ul元素

    .parent()  //跳到ul的父元素,也就是id为div1的元素

    .siblings()  //跳到div1元素平级的所有兄弟元素

    .children('ul') //这些兄弟元素中的ul子元素

    .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

    尺寸相关、滚动事件

    1、获取和设置元素的尺寸

    width()、height()    获取元素width和height 

    innerWidth()、innerHeight()  包括padding的width和height 

    outerWidth()、outerHeight()  包括padding和border的width和height 

    outerWidth(true)、outerHeight(true)  包括padding和border以及margin的width和height

    2 获取元素相对页面的绝对位置

    offset()

    3、获取可视区高度

    $(window).height();

    4、获取页面高度

    $(document).height();

    5、获取页面滚动距离

    $(document).scrollTop(); 

    $(document).scrollLeft();

    6、页面滚动事件

    $(window).scroll(function(){ 

        ...... 

    })

    相关文章

      网友评论

          本文标题:jquery特殊效果

          本文链接:https://www.haomeiwen.com/subject/zxgoiqtx.html