html - How to animate a background size using jquery - Stack Overflow
to customize your list.
Announcing Stack Overflow Documentation
We started with Q&A. Technical documentation is next, and we need your help.
Whether you're a beginner or an experienced developer, you can contribute.
I want to animate the background of my website so that when the user enters it, the background starts at a size of 60% and goes up until 100% over the course of several seconds.
I tried using animate in jQuery like below, but the console says 'Unexpected token -'. This worked for opacity in another piece of code.
What am I doing wrong?
$(document).ready(function() {
$('.left-content').animate(
background-size: 100%
There are 2 problems with your code.
Missing quotes around 100%
JavaScript understands background-size as variable background minus variable size. You shoud use backgroundSize instead.
$('.left-content').animate({ backgroundSize: '100%' }, 3000);
With these two corrections, it works. See:
You need to wrap quotes around 100%. After that you can either wrap quotes around background-size as well:
"background-size": "100%"
...or use camel case:
backgroundSize: "100%"
66.9k1781125
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
The week's top questions and answers
Important community announcements
Questions that need answers
By subscribing, you agree to the
Stack Overflow works best with JavaScript enabled第四十课：CSS3 transition详解 - 推酷
第四十课：CSS3 transition详解
W3C中对transition是这样描述的：允许css的属性值在一定的时间内平滑的过渡，也就是说，以动画的效果改变css的属性值。
transition主要包含4个属性值：transition-property：样式名；transition-duration：持续时间；transition-timing-function：缓动公式；transition-delay：延迟多长时间才触发。接下来我们来详细讲下这四个属性值。
transition-property
transition-property是用来指定当元素的哪个属性值变化时，就执行transition效果的。主要有以下几个值：none（没有属性会获得过渡效果，也就是说设置了none，此元素不会有过渡效果，就跟没设置transition一样）；all（只要元素的任何一个属性改变，就会有过渡效果，这是默认值）；property（具体的属性名，可以有多个，用逗号分开，比如：transition-property: width,）；
transition-duration
动画持续的时间，单位可以是s，也可以是ms。我们可以多个持续时间值，比如：transition-duration:1s, 1500ms, 2s;transition-property:width,height,color。其中1s对应width属性改变，1500ms对应height属性的改变，2s对应color属性的改变。默认值为0.
transition-timing-function
缓动公式，根据时间的推进，去改变属性值的变换速度。它主要有6个值：
ease（逐渐变慢），默认值
linear（匀速）
ease-in（加速）
ease-out（减速），跟ease的区别是，减速的变化程度不一样。
ease-in-out（先加速，再减速）
cubic-bezier，允许你自定义一个时间曲线，通过cubic-bezier(x1,y1,x2,y2)，此属性值可以模拟以上5个状态，只要传入相应的x1,y1,x2,y2给cubic-bezier(x1,y1,x2,y2)。这4个值必须在[0,1]之间，否则无效。
transition-delay
延迟多长时间，才进行变化，单位有s，ms。默认值为0.
举个例子来展示下transition如何使用：
height:100
background:
font-size:14
#move:hover{ & &
//鼠标移动到move元素时，就会动态的改变它的三个属性值background，font-size，left。
background:
font-size:26
transition: all 2s ease 0.3s;
-moz-transition: all 2s ease 0.3s;
-webkit-transition: all 2s ease 0.3s;
-o-transition: all 2s ease 0.3s; & &&
著名的Bootstrap的动画就是基于transition的。另外，当上面的这个动画（过渡效果）结束后，就会触发一个transitionEnd的事件。此transitionEnd在不同浏览器下具有不同的写法，比如：webkitTransitionEnd,oTransitionEnd等。那么，我们如何来取得这个可用的事件名呢？
第一种方法：动态创建一个元素与一个样式表插入DOM树中，然后改变目标样式值，从而触发回调，得到事件的名字，最后把元素和样式表从DOM树中删除。
(function(){
var span = document.createElement(&span&); &
//创建一个元素span
span.id = &chaojidan&;
span.innerHTML = &test&;
var body = document.body || document.documentE
var style = document.createElement(&style&); &
//创建一个元素style
body.appendChild(span);
body.appendChild(style);
//添加到页面中
style.innerHTML = &#chaojidan{color:opacity:0;height:1overflow:-moz-transition:color 0.1s;-webkit-transition:color 0.1s;-o-transition:color 0.1s;}&; & &
//设置元素span的样式，只要改变span的color属性值，就会触发过渡动画。
&transitionend otransitionend oTransitionEnd webkitTransitionEnd&.replace(/\w+/g,function(type){
//type就是每次正则匹配的值
span.addEventListener(type,function(e){ &
//给元素span绑定过渡动画结束后的触发的事件，这里绑定了4个。
window.transitionEnd = e. & &
//浏览器支持哪个名字，就会执行到这里，然后把事件的类型，赋给window对象的transitionEnd。
setTimeout(function(){span.style.color=&black&;}); &
//执行span元素的过渡动画，用时100ms。
setTimeout(function(){
body.removeChild(span);
body.removeChild(style);
第二种方法：从事件的构造器着手，如果把事件构造器的名字直接传入到createEvent，不抛错，就证明浏览器支持这种事件。
var getTransitionEnd = function(){
var obj = {
&TransitionEvent&:&transitionend&,
&WebKitTransitionEvent&:&webkitTransitionEnd&,
&OTransitionEvent&:&oTransitionEnd&,
&otransitionEvent&:&otransitionEnd&
for(var name in obj){
var a = document.createEvent(name);
ret = obj[name];
}catch(){}
getTransitionEnd &= function(){ &
//重写此方法，只需要检测一次，下次直接返回缓存结果，这叫做惰性函数。
最后，我们用css transition实现一个动画效果：
width:100height:100position:background:
transition: left 5s;
-moz-transition: left 5s;
-webkit-transition: left 5s;
-o-transition: left 5s; & &&
var $ = function(id){
return document.getElementById(id);
var el = $(&test&);
$(&run&).onclick = function(){ & &
//点击run按钮时，触发过渡动画效果，此动画把元素test从0移动到700，用时5s。
el.style.left = &700px&;
$(&stop&).onclick = function(){ &
//点击stop按钮，将会停止过渡动画。
var left = window.getComputedStyle(el,null).
//得到元素test的当前left的值
el.style.left = &
//当test元素在运动时，你点击了stop按钮的话，test元素会马上停止。
[&&, &-moz-&, &-o-&, &-webkit-&].forEach(function(prefix){
el.style.removeProperty(prefix +&transition&); &
//DOM2定义的style方法，低版本IE浏览器不支持。这里只能删除标签上的style样式值
上面的例子暴露出transition的弱点了，虽然我们停止动画时，可以通过取当前的left值然后重新赋值的手段实现了，但是只要transition这个样式没有没清除掉，那么，我们后面每一次变动left这个样式值，都会发生过渡动画效果。而想移除这个transition样式，只有当它写在标签的style属性中时，我们才能很好的删除。如果它是定义在内部样式（我们例子中写法）或外部样式，那么要删除就比较麻烦了（可以通过CSSStyleSheet对象删除）。但是如果外部样式是跨域获取的，那么删除样式规则这个手段就失效了，意思就是无法删除transition样式值了。
因此，使用transition实现动画效果，可控性太差，不适合作为一个框架的动画引擎的实现手段。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致　　在分析jQuery的事件的时候有提到绑定事件的方式：
Dean Edwards的跨浏览器事件绑定使用的方式是
element["on" + type] = handleE
　　即绑定的事件的前提条件是element.onxxx属性必须存在。
jQuery的绑定方式是使用浏览器的绑定绑定方法
if ( elem.addEventListener ) {
　　elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
　　elem.attachEvent( "on" + type, eventHandle );
　　为什么不用Dean Edwards使用的方式来绑定？
　　并非所有浏览器支持的事件都有对应的["on" + type]属性。比较典型的例子动画事件
height:100
background:
font-size:20
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0}
to {top: 200}
@keyframes mymove {
from {top: 0}
to {top: 200}
&p&该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。&/p&
&div id="myDIV" &点我开始动画&/div&
var x = document.getElementById("myDIV")
//存在onclick属性
x.onclick = myF
// 使用 JavaScript 开始动画
function myFunction() {
//x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
Chrome, Safari 和 Opera
//x.addEventListener("webkitAnimationStart", myStartFunction);
//x.addEventListener("webkitAnimationIteration", myIterationFunction);
//x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
　　上面的例子在IE10+、webkit4.0+内核浏览器（chrome、Opera、safari)、Firefox16.0+都能正常运行。但是如果将动画的绑定事件换成
x.onanimationstart = myStartF
x.onanimationiteration = myIterationF
x.onanimationend = myEndF
　　三个动画函数没有任何一个能够正常运行。
　　所以现在明白jQuery为什么使用原生的事件绑定方法了吧。
　　document.documentElement即html标签的DOM对象
　　document.body即body标点的DOM对象
&　　以chrome/IE8/IE9/firefox为例，简易的比较一下window、document、html、body、element的onxxx属性
　　说明：表格中yes表示对象拥有该属性，否则没有
chrome45.0中所有的onxxx属性
onanimationend
onanimationiteration
onanimationstart
onautocomplete
onautocompleteerror
onbeforeunload
onbeforecopy
onbeforecut
onbeforepaste
oncanplaythrough
oncontextmenu
oncuechange
ondblclick
ondevicemotion
ondeviceorientation
ondragenter
ondragleave
ondragover
ondragstart
ondurationchange
onhashchange
onkeypress
onlanguagechange
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmousewheel(不推荐，用onwheel替代)
onpagehide
onpageshow
onpopstate
onpointerlockchange
onpointerlockerror
onprogress
onratechange
onreadystatechange
onselectionchange
onselectstart
ontimeupdate
ontransitionend
onvolumechange
onwebkitfullscreenchange
onwebkitfullscreenerror
onwebkitanimationend
onwebkitanimationiteration
onwebkitanimationstart
onwebkittransitionend
　　chrome浏览器的事件基本都都列在上面了，基本上每个事件都有.onxxx属性，连animationend这样的HTML5新事件都包含在里面了，不过需要加webkit前缀。除了一下几个比较特殊的以外：
　　没有onfocusin，但是支持focusin事件
　　没有onfocusout，但是支持focusout事件
　　不支持打印事件:onafterprint、onbeforeprint
　　Safari 3.1 到 6.0 版本才支持transitionend事件, 使用webkitTransitionEnd来绑定
　　查看事件的具体作用推荐：
IE9中所有的onxxx属性
onactivate&
onafterprint&
onafterupdate&
onbeforeactivate&
onbeforecopy&
onbeforecut&
onbeforedeactivate&
onbeforeeditfocus&
onbeforepaste&
onbeforeprint&
onbeforeunload&
onbeforeupdate&
oncanplay&
oncanplaythrough&
oncellchange&
oncontextmenu&
oncontrolselect&
ondataavailable&
ondatasetchanged&
ondatasetcomplete&
ondblclick&
ondeactivate&
ondragend&
ondragenter&
ondragleave&
ondragover&
ondragstart&
ondurationchange&
onemptied&
onerrorupdate&
onfilterchange&
onfocusin&
onfocusout&
onhashchange&
onkeydown&
onkeypress&
onlayoutcomplete&
onloadeddata&
onloadedmetadata&
onloadstart&
onlosecapture&
onmessage&
onmousedown&
onmouseenter&
onmouseleave&
onmousemove&
onmouseout&
onmouseover&
onmouseup&
onmousewheel&
onmoveend&
onmovestart&
onmssitemodejumplistitemremoved&
onmsthumbnailclick&
onoffline&
onplaying&
onprogress&
onpropertychange&
onratechange&
onreadystatechange&
onresizeend&
onresizestart&
onrowenter&
onrowexit&
onrowsdelete&
onrowsinserted&
onseeking&
onselectionchange&
onselectstart&
onstalled&
onstorage&
onstoragecommit&
onsuspend&
ontimeupdate&
onvolumechange&
onwaiting&
　　有几个特殊的情况：
　　没有onpageshow，也不支持该事件，需要IE11+才支持
　　没有onpagehide，也不支持该事件，需要IE11+才支持
　　没有onsearch，IE所有版本都不支持该事件
　　没有onshow,IE所有版本都不支持该事件
　　没有ontoggle,IE所有版本都不支持该事件
　　没有onanimationend，也不支持该动画事件，需要IE10+才支持
　　没有onanimationiteration，也不支持该动画事件，需要IE10+才支持
　　没有onanimationstart，也不支持该动画事件，需要IE10+才支持
　　没有过渡ontransitionend，也不支持过渡事件，需要IE10+才支持
　　没有onwheel,但IE9+支持wheel绑定事件，替代onmousewheel
　　没有onpopstate
IE8中所有的onxxx属性
html/script /div/a/ button/ span等普通元素&
style/link
input(所有type类型)
onactivate&
onafterprint&
onafterupdate&
onbeforeactivate&
onbeforecopy&
onbeforecut&
onbeforedeactivate&
onbeforeeditfocus&
onbeforepaste&
onbeforeprint&
onbeforeunload&
onbeforeupdate&
oncellchange&
oncontextmenu&
oncontrolselect&
ondataavailable&
ondatasetchanged&
ondatasetcomplete&
ondblclick&
ondeactivate&
ondragend&
ondragenter&
ondragleave&
ondragover&
ondragstart&
onerrorupdate&
onfilterchange&
onfocusin&
onfocusout&
onhashchange&
onkeydown&
onkeypress&
onlayoutcomplete&
onlosecapture&
onmessage&
onmousedown&
onmouseenter&
onmouseleave&
onmousemove&
onmouseout&
onmouseover&
onmouseup&
onmousewheel&
onmoveend&
onmovestart&
onmssitemodejumplistitemremoved&
onmsthumbnailclick&
onoffline&
onpropertychange&
onreadystatechange&
onresizeend&
onresizestart&
onrowenter&
onrowexit&
onrowsdelete&
onrowsinserted&
onselectionchange&
onselectstart&
onstorage&
onstoragecommit&
　　除了IE9暴露的问题以外还有：
　　没有oninput,也不支持该事件，需要IE9+才支持
　　没有多媒体的onxxx属性，也不支持所有的多媒体事件（包括oncanplay/oncanplaythrough/ondurationchange/onemptied...)，需要IE9+才支持
Firefox42.0中所有的onxxx属性
onafterprint
onbeforeprint
onbeforeunload
onafterscriptexecute
onbeforescriptexecute
oncanplaythrough
oncontextmenu
ondblclick
ondevicelight
ondevicemotion
ondeviceorientation
ondeviceproximity
ondragenter
ondragleave
ondragover
ondragstart
ondurationchange
onhashchange
onkeypress
onlanguagechange
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmozfullscreenchange
onmozfullscreenerror
onmozpointerlockchange
onmozpointerlockerror
onpagehide
onpageshow
onpopstate
onprogress
onratechange
onreadystatechange
ontimeupdate
onuserproximity
onvolumechange
　　Firefox有几个比较特殊的地方：　　
　　没有onfocusin，也不支持focusin事件
　　没有onfocusout，也不支持focusout事件
　　没有onsearch,也不支持该事件
　　没有onanimationend，但是支持animationend事件
　　没有onanimationiteration，但是支持animationiteration事件
　　没有onanimationstart，但是支持animationstart事件
　　没有ontransitionend，但是支持transitionend事件
　　已废弃onmousewheel
　　没有onstorage
　　没有ontoggle，也不支持toggle事件
　　到此为止了，花费的时间不少，算是一个各个浏览器差别的笔记，比较粗略，实际上每个浏览器不同版本会有一些细微差别，不过有这这个大概的目录以后会比较容易查找不同。以后项目中如果遇到有onxxx事件绑定的问题有个参考。
　　如果觉得本文不错，请点击右下方【推荐】！
阅读(...) 评论()