css3 jquery转换

有没有更好的触发css3转换的方式比这个更好，我认为这是一个小黑客或者是这样的每个人都这样做？css3 jquery转换

比方说我们得到了与以下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); 
});

然后过渡被触发，但这不是有点哈克？还有其他解决方案吗？

感谢您的阅读我希望我的回答很明确。

来源

2012-05-14 onlineracoon

涉及哪些浏览器？在FX12上，它按预期工作：http://jsfiddle.net/dXEgw/ – fcalderan

这是我见过的唯一解决方案。 – blez

我使用Chrome和indead，在Firefox上没有超时的情况下可以看到过渡，但是在Chrome上它没有触发。我只是不喜欢这个解决方案。谢谢无论如何blez;） – onlineracoon

你只需要修改你的代码一点点......

.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的高度或在其中放置一些文字来注意改变。

来源

2012-05-14 12:09:58 mukund

不工作：S – onlineracoon

请使用背景动画，它将支持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}) 
      }) 
     });

来源

2012-05-14 11:07:46 ShibinRagh

回答

相关问题