今天了解了一下stop的使用方法,但是实例中加入color:red的时候,动画效果没有实现,具体实例如下:
http://jsbin.com/fezaroyene/edit?html,js,output
查看animate的使用方法,发现只能使用数字值
若想实现颜色变化的话,需要加入插件:
https://github.com/jquery/jquery-color
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="jquery-color/jquery.color.js"></script><!--引入jquery.color.js插件--> <div id="animater"> stop()方法测试 </div> <div id="button"> <input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </div>
//为了看效果,随意写的动画 $('#animater').animate({ 'right':-400 }, 3000) .animate({'font-size':'16px'},'normal') .animate({'font-size':'26px'},'normal') .animate({'font-size':'36px'},'normal') .animate({'opacity':0},'normal') .animate({'opacity':1},'normal') .animate({'left':'200px','font-size':'16px','color':'red'},'normal'); // 点击不同的button执行不同的操作 $('#button1').click(function(){ //默认参数是false,不管写一个false还是两个false还是没写false效果一样 $('#animater').stop(); }); $('#button2').click(function(){ //第二个参数默认false $('#animater').stop(true); }); $('#button3').click(function(){ $('#animater').stop(false,true); }); $('#button4').click(function(){ $('#animater').stop(true,true); });