<div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>

<style type="text/css">  *{  margin: 0;  padding: 0;  }  ul{  list-style: none;  }  #box{  width: 1150px;  height: 400px;  margin: 50px auto;  border: 1px solid red;  overflow: hidden;  }  #box ul{  width: 1300px;  }  #box ul li{  width: 240px;  height: 400px;  float: left;  } </style>

/* * 實現動畫的步驟: 1.怎樣得到當前的樣式 封裝一個函數 getStyle() 2.步長的計算 用(目標位置 - 當前的樣式) / 10 3. 緩動動畫原理: 盒子本身的樣式 + 步長(不斷變化的) *//* * css設置透明度，一般在ie中用的是filter:alpha(opacity=0);而在firefox中，一般就是直接使用opacity:0*/// 多個屬性的運動框架 以及添加回調函數function animate(obj,json,fn){ // 目標obj json 屬性：屬性值 fn回調函數 clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true;// 用來判斷是否停止定時器  // 遍歷json for (var attr in json) { //attr 屬性 json[attr]值  var curStyle = 0;  if (attr == "opacity") {  curStyle = parseInt(getStyle(obj,attr)*100);  } else{  curStyle = parseInt(getStyle(obj,attr));// 獲得數值  }  // 得到步長 目標位置就是json[attr]  var step = (json[attr]-curStyle) / 10;  step = step > 0 ? Math.ceil(step) :Math.floor(step);  // 判斷透明度  if (attr == "opacity") { // 判斷用戶有沒有輸入opacity  if ("opacity" in obj.style) {    obj.style.opacity = (curStyle + step) / 100;  } else{   obj.style.filter = "alpha(opacity="+(curStyle +step)+")";  }  } else if(attr == "zIndex"){  obj.style.zIndex = json[attr];  } else{  obj.style[attr] = curStyle +step +"px";  }  // 判斷是否已經都到了目標位置 只要其中一個不滿足條件 就不應該停止定時器  if (curStyle != json[attr]) {  flag = false;  } } // 判斷定時器條件 是否該停止了 if (flag) {  clearInterval(obj.timer)  // 當定時器停止后，動畫也就結束了.如果有回調函數就執行回調函數  if(fn){  fn();  } } },30);}// 封裝函數 得到屬性function getStyle(obj,attr) { // 誰的 那個屬性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器 }}

<script src="animate.js"></script>

<script>  window.onload = function(){  var box = document.getElementById("box");  var lis = box.children[0].children;  for (var i = 0; i < lis.length;i++) {   lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";   lis[i].onmouseover = function(){   for (var j = 0; j < lis.length;j++) {    animate(lis[j],{width:100});   }   animate(this,{width:800});   }   lis[i].onmouseout = function(){   for (var k = 0; k < lis.length;k++) {    animate(lis[k],{width:240});   }   }  }  }</script>

<script src="jquery-1.11.1.min.js"></script> <script>  $(function(){  $("#box li").each(function(index,ele){   $(ele).css("background","url(images/"+(index+1)+".jpg)");  }).mouseenter(function(){   $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);  }).mouseleave(function(){   $("#box li").stop().animate({width:240},500);  });  }); </script>