jquery-2

Posted 2020-11-29 marswenze

隐藏/显示

$(‘div’).hide();隐藏

$(‘div’).show();显示

$(‘div’).toggle();切换

淡入淡出

$(div).fadeIn(speed,callback);淡入

$(div).fadeOut(speed,callback);淡出

$(div).fadeToggle(speed,callback);淡入淡出切换；

$(div).fadeTo(speed,opacity,callback);渐变为给定的不透明度

滑动

$(div).slideDown(speed,callback);向下滑动

$(div).slideUp(speed,callback);向上滑动

$(div).slideToggle(speed,callback);滑动之间切换

动画

$(div).animate({params},speed,callback);

可以使用相对值：

$(div).animate({

left:’200px’,

height: ‘+=150px’,

});

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

队列功能：多个不同的动画会按照队列顺序执行；

$(div).stop()用于动画或效果完成前对它们进行停止；

tab切换

<ul>

        <li class="a">首页</li>

        <li >那啥</li>

        <li >那啥啥</li>

    </ul>

    <div class="b">

        <div class="a">123</div>

        <div>456</div>

        <div>789</div>

    </div> 

css

.b div{ 

    display: none;

    width: 100px;

    height: 100px;

    border: 1px solid #000;

}

.b div.a{

display: block;

}

js

$(‘li‘).click(function(){

    var i=$(this).index()

    $(this).addClass(‘a‘).siblings().removeClass(‘a‘);

    $(‘.b div‘).eq(i).addClass("a").siblings().removeClass(‘a‘)

}