JUquery 不能使用animate

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。

animate一般只支持大小,位置,透明度的变化

今天看到新浪微博在微博发布框无内容时,点击发布按钮,发布框会有背景颜色闪烁,产生警示的效果,友好的用户体验就想模仿一下。 
于是又纠结了一天。。。

刚开始我用jQuery的fadeIn和fadeOut,很快的就能达到效果。但是我发现,微博那里是逐渐地改变背景颜色实现的,而fadeIn跟fadeOut是通过逐渐改变alpha即透明度实现。所以开始纠结中。。 
然后,写了段代码

var color = function(){};
color.fadeIn = function(a){
if(a>=255){
$(‘#input‘).css(‘backgroundColor‘, ‘gba(‘+a+‘,‘+a+‘,‘+a+‘)‘);
a++;
setTimeout(color.fadeIn(a), 20);
} else {
setTimeout(color.fadeOut(a), 20);
}
}
color.fadeOut = function(a){
// 此处省略
}

简单说,我是想实现,比如rgb(a, a, a)递增至rgb(255, 255, 255) 再递减至 rgb(a, a, a) 
但是效果差很多,一测试颜色没变化。 
于是,打了一段测试代码

setTimeout($(‘#input‘).css(‘backgroundColor‘, ‘red‘), 1000);
setTimeout($(‘#input‘).css(‘backgroundColor‘, ‘black‘), 2000);

打开浏览器,直接就是黑色,并没有从红色跳到黑色。 
。。。 
后来 找到jQuery的一个插件叫jquery.color.js里面重写了backgroundColor,color,boderColor等属性颜色的animate效果 
于是问题可以这样解决 : 
$(‘#input‘).animate({backgroundColor:‘red‘}, 1000); 
这样就可以从原始的背景颜色逐渐变成红色的效果。 
很神奇啊,开始研究jquery.color.js的源代码。 
先附上用jquery.color.js实现的颜色闪烁的警示效果代码

$(‘.publish a‘).click(function(){
var content = $(‘textarea‘).val();
if(content==""){
$(‘#input‘).stop(false, true).animate({backgroundColor:‘#FF9966‘}, 250)
.animate({backgroundColor:‘#FFF‘}, 200)
.animate({backgroundColor:‘#FF9966‘}, 250)
.animate({backgroundColor:‘#FFF‘}, 200);
} else {
$.post(url, {input:content},function(data){
});
}
});
时间: 2024-10-18 14:12:59

JUquery 不能使用animate的相关文章

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

JS animate动画

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style> #senda,#sendb{ position: relative; } </style></head><body> <div id="senda"

齐全的CSS3动画库animate.css

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 查看演示

jQuery--自定义动画animate()

语法结构 animate(params,speed,callback) params:包含一个样式属性及值的映射.比如{property1:'value1',property:'value2',......} speed:速度参数,可选. callback:在动画完成时执行的函数,可选 1.自定义简单动画,使元素在3秒(3000毫秒),向右移动500像素 <!DOCTYPE html> <html lang="en"> <head> <meta

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

可用于jquery animate()方法的css属性

* backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * borderTopWidth * borderSpacing * margin * marginBottom * marginLeft * marginRight * marginTop * outlineWidth * padding * paddingBottom * paddingLeft * paddi

[React Native] Animate Styles of a React Native View with Animated.timing

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration. import React, {Component} from 'react'; import {Text, V

简单animate方法的封装

function animate(ele,json,fn){ clearInterval(ele.timer); ele.timer = setInterval(function () { var bool = true; console.log(1); for(var k in json){ if(k == "opacity"){ var leader = getStyle(ele,k)*100||0; var step = (json[k]*100-leader)/10; step

解析jQuery效果函数animate()

1.参数说明: animate(params,[speed],[easing],[fn]) params:一组包含作为动画属性和终值的样式属性和及其值的集合<br/> speed:三种预定速度之一的字符串("slow"600ms,"normal"400ms, or "fast"200ms)或表示动画时长的毫秒数值(如:1000)<br/> easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"