码迷,mamicode.com
首页 > Web开发 > 详细

jquery-2

时间:2020-05-09 16:44:58      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:ima   move   font   fun   params   nim   red   index   ram   

隐藏/显示

$(‘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‘)
}

jquery-2

标签:ima   move   font   fun   params   nim   red   index   ram   

原文地址:https://www.cnblogs.com/marswenze/p/12858469.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!