jquery中的animate方法是不是不能jquery改变div样式的背景颜色

来源：蜘蛛抓取(WebSpider) 时间：2017-09-12 04:29 标签： jquery 改变div内容
1301人阅读
XHTML+CSS（26）
JQuery（33）
背景颜色用animate方法时时无法改变颜色的
所以要使用插件进行补充。
使用方法：
&!DOCTYPE html&
background-color: #bada55;
width: 100
&script src=&/jquery-1.11.1.min.js&&&/script&
&script src=&jquery.color.min.js&&&/script&
&button id=&go&&Simple&/button&
&button id=&sat&&Desaturate&/button&
&div id=&block&&Hello!&/div&
jQuery(&#go&).click(function(){
jQuery(&#block&).animate({
backgroundColor: &#abcdef&
}, 1500 );
jQuery(&#sat&).click(function(){
jQuery(&#block&).animate({
backgroundColor: jQuery.Color({ saturation: 0 })
}, 1500 );
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：183182次
积分：2434
积分：2434
排名：第15632名
原创：74篇
转载：41篇
评论：28条
(1)(3)(2)(2)(2)(2)(1)(2)(2)(7)(2)(3)(6)(1)(2)(3)(2)(2)(2)(2)(2)(2)(1)(2)(1)(1)(1)(1)(2)(2)(1)(7)(3)(6)(14)(18)(2)Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
这个是如此的模糊，让我们看下实例吧！
$( ".block:first" ).animate(
left: 100,top:200
duration: 1000,
step: function( now, fx ){
if(k==1) console.log(fx);
你能想象输出结果吗？
让我们来看下jQuery源码吧，与先前的版本差别挺大的，所以用了最新的1.9
jQuery.fx = Tween.prototype.
function Tween( elem, options, prop, end, easing ) {
return new Tween.prototype.init( elem, options, prop, end, easing );
jQuery.Tween = T
Tween.prototype = {
constructor: Tween,
init: function( elem, options, prop, end, easing, unit ) {
this.elem =
this.prop =
this.easing = easing || "swing";
this.options =
this.start = this.now = this.cur();
this.end =
this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
ok！你应该有个大致的轮廓了，让我详细讲解下参数的意义吧~~
动画方式"linear",swing,easeIn,easeOut...等
正在动画的元素
动画结束值
动画当前值
options.duration
传到动画动的duration
&options.queue
在动画过程中从0.0到1.0
正在变化的css属性
CSS属性开始变化的值
CSS值的单位
知道这些，我们可以做很多事！
jQuery Animation实现css3动画 ：jQuery Animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 &margin:30px&）。字符串值无法创建动画（比如 &background-color:red&）。
像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。
如果我们自己用Javascript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个stp参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。
width:<span style="color: #px;
height:<span style="color: #px;
position:absolute;
top:<span style="color: #px;
left:<span style="color: #px;
text-indent: 90px;
background-color:red;
&div id="box"&&/div&
Javascript
$('#box').animate({
textIndent: 0 }, {
//这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。
duration:2000,
step: function(now,fx) {
fx.start=45;//你可以尝试修改start,end值，来看rotate的变化
if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
$(this).css('-webkit-transform','rotate('+now+'deg)');
这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。
阅读(...) 评论()

我要回帖

更多关于 jquery 改变div内容 的文章

 

随机推荐