CSS3过渡效果 兼容IE6、IE7、IE8

<style>
    .box{
        width:120px;height:40px;background:yellowgreen;line-height:40px;transition:width 1s;cursor:pointer;
    }
   .box:hover{
        width:180px;
    }
</style>
<div class="box">Hello World</div>
 <!--[if lte IE 8]> 
        <style>
            .box:hover{
                width:100px\9;
            }
        </style>
        <script>
            $(function(){
                $(".box").hover(function(){
                    $(this).animate({width:180},500)
                },function(){
                    $(this).animate({width:120},500)
                });
            });
        </script>
   <![endif]-->

该过渡效果兼容各个浏览器,比如IE5,IE6,IE7,IE8等。

posted @ 2017-02-15 21:55  盒子豪  阅读(3703)  评论(0编辑  收藏  举报