css3 jquery轉換

Question

有沒有更好的觸發css3轉換的方式比這個更好，我認爲這是一個小黑客或者是這樣的每個人都這樣做？

比方說我們得到了與以下CSS一個div：

.box{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin: -50px 0px 0px -50px; 

    width: 100px; 
    opacity: 0; 
    transition: opacity .3s ease-out; 
} 

.box.box-visible{ 
    opacity: 1; 
} 

現在我們得到了以下的jQuery：

$(function(){ 
    $('.box').addClass('box-visible'); 
}); 

這不會觸發動畫，所以我們這樣做的時候：

$(function(){ 
    var transition = setTimeout(function(){ 
     $('.box').addClass('box-visible'); 
    }, 1); 
}); 

然後過渡被觸發，但這不是有點哈克？還有其他解決方案嗎？

感謝您的閱讀我希望我的回答很明確。

Answer 1

你只需要修改你的代碼一點點......

.box{ 
      position: fixed; 
      top: 50%; 
      left: 50%; 
      margin: -50px 0px 0px -50px; 
      width: 100px; 
      border-width:thin; 
      border-style:solid; 
      background:red; 
      opacity: 0; 
      -moz-transition: opacity 3s ease-out;//for firefox 
      -o-transition: opacity 3s ease-out;// for opera 
      -webkit-transition: opacity 3s ease-out;// for chrome 
     } 
    .box-visible{ 
     opacity:1; 
     } 

然後在jQuery的

 $(document).ready(function(){ 
     $(function(){ 
      $('.box').addClass('box-visible'); 
     }); 
    }); 

記住：要麼設置div的高度或在其中放置一些文字來注意改變。

Answer 2

請使用背景動畫，它將支持LL瀏覽器實例：

div ul li a{background:url(../images/asso/arow.png) no-repeat left 0;} 
div ul li a:hover{ background-position:0 -66px;} 




(function($) { 
    $.extend($.fx.step,{ 
     backgroundPosition: function(fx) { 
      if (fx.state === 0 && typeof fx.end == 'string') { 
       var start = $.curCSS(fx.elem,'backgroundPosition'); 
       start = toArray(start); 
       fx.start = [start[0],start[2]]; 
       var end = toArray(fx.end); 
       fx.end = [end[0],end[2]]; 
       fx.unit = [end[1],end[3]]; 
      } 
      var nowPosX = []; 
      nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 
      nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 
      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; 

      function toArray(strg){ 
       strg = strg.replace(/left|top/g,'0px'); 
       strg = strg.replace(/right|bottom/g,'100%'); 
       strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); 
       var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 
       return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; 
      } 
     } 
    }); 
})(jQuery); 



$(function(){ 
    $('ul li') 
     .mouseover(function(){ 
      $(this).find('a').stop().animate({backgroundPosition:"(0 -66)"}, {duration:500}) 
     }) 
     .mouseout(function(){ 
      $(this).find('a').stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) 
      }) 
     });