jq动画
<!--jq动画 递归
$("#btn1").on('click',function(){
$('.hellobox').find('.hello').first().animate({'left':'500px'},function auto(){
$(this).next().animate({'left':'500px'},auto)
})
});
$("#btn2").on('click',function(){
$(".hellobox").find('.hello').last().animate({'left':'0'},function auto2(){
$(this).prev().animate({'left':'0'},auto2)
})
});
show().hide().slideDown(),slideUp().fadeIn().fadeOut() 传空串.4s 都可以再接受一个回调函数 animate动画， 同一个元素 同步动画 队列动画（.连缀（其实是；的简写）或；分开来写或写回吊函数）； 不同元素 //同步动画 队列动画（只能写回吊函数，可读性差）； 改进： 1.$(‘.box’).slideUp().slideDown().css({background:“red”})//css不是动画方法会排在动画方法的最前面 2.$(‘.box’).slideUp().slideDown(function(){ $(this).css({background:“red”}) //利用回调可以实现效果，但存在污染问题 }) 3.$(‘.box’).slideUp().slideDown（）.queue(function(){ $(this).css({background:“red”}) //解决污染问题，这个方法本身也是个动画了 }) 4.$(‘.box’).slideUp().slideDown（）.queue(function(){ $(this).css({background:“red”}) }).hide(); //hide()方法不执行了？ 5.$(‘.box’).slideUp().slideDown（）.queue(function(netx){ $(this).css({background:“red”}) next(); }).hide(); //传入next函数，就可以执行了后面的这个动画了1.4版本以后 5.$(‘.box’).slideUp().slideDown（）.queue(function(next){ $(this).css({background:“red”}) $(this).dequeue();//1.4版本之前的解决方法 }).hide(); 6.$(‘.box’).slideUp().slideDown（function(){ $(this).clearQueue()//动画执行带第二个不执行了清除动画 }）.queue(function(netx){ $(this).css({background:“red”}) $(this).dequeue(); }).hide(); stop(); 一个动画 点击停止动画 再点开始继续后面的动画； 队列动画 点击停止第一个动画 再继续后面的动画 队列动画 第一个参数为true,点击停止,就会停止并且清除后面的动画 第二个参数为true,点击停止,会跳转到末尾的位置上（记住只是位置上，不是最后一个动画上） delar()动画延迟 $('box').delay(1000)//延迟1秒开始动画 .animate({left:'300px'}) animate({bottom:'300px'}).delay(2000)//延迟2秒执行第三个动画 animate({widht:'300px'}) animate({height:'300px'}) // animated 判断元素是否存在动画 $('box').slideDown('slow',function(){ $(this).slideToggle('slow',arguments.callee)//arguments.callee 递归调用不停的展开 折叠 }) $('button').on('click',function(){ $(':animated').stop().css({background:'blue'}); }) //jq动画全局属性 $.fx.interval=200; 动画运行帧数 默认13帧，越小越流畅越伤性能，越大越卡 $.fx.off=true 关闭动画效果 //animate运动效果 两种默认swing(缓冲,两头慢中间快) linear(匀速) $('box').animate({left:'200px'},3000,'linear')； -->
正则删除指定的多个class，添加制定的class
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .hello{ width: 100px; height: 100px; background-color: red; position: relative; margin-bottom: 10px; } .to1{ font-weight: bold; } .to2{ color: yellow; } .to3{ color: #fff; } </style> </head> <div class="hello to1 to2">hello</div> <input type="button" value="点击" id="btn1" /> <input type="button" value="点击2" id="btn2" /> <body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!--<script src="2.js"></script>--> <script> $("#btn1").on('click',function(){ var str=$(".hello").attr('class');//获取所有的class var re=/to./ig; //正则 //console.log(re.test(str)) var newClass=str.replace(re,'').trim();//保留需要的 不需要的替换成空串，并去除字符串两边的空格 console.log(newClass) $(".hello").attr('class',newClass+' to3') //重新设置class //$(".hello").addClass('to3');//增加class }) /* $("#btn1").on('click',function(){ $(".hello").removeClass().addClass('hello to3'); }) $("#btn2").on('click',function(){ $(".hello").removeClass().addClass('hello to2'); })*/ </script> </body> </html>