jQuery制作网站客户服务效果，在IE6下有问题

源码
<!doctype html>
<html>
<head>
    <title>在线客户</title>
    <style type="text/css">
    body { font-size:12px;}
    ul { list-style:none;}
    #online_servies { position:fixed;_position:absolute;right:0px;top:200px; width:200px; height:252px;}
    #online_servies .title {  position:absolute; width:29px; height:130px; right:0px; border:1px solid #E3E3E3; border-top:none; border-right:none; margin:60px 0;cursor:pointer;}
    #online_servies .title .ico { width:29px; background:#3DA7CC; height:28px;} 
    #online_servies .title .text {width:10px; padding:15px 9px; height:70px; line-height:18px; color:Gray;}
    #online_servies .con { position:absolute;width:168px;height:250px;right:0px;border:1px solid #E3E3E3;border-bottom-left-radius:3px;border-top-left-radius:3px; display:none;}
    #online_servies .con ul { padding:20px;}
    #online_servies .con ul li { height:22px;line-height:22px; margin:5px 0;}
    </style>
</head>
<body>
<!-- online --> 
<div id="online_servies">
    <div class="title">
        <div class="ico"></div>
        <div class="text">在线客服</div>
    </div>
    <div class="con">
        <ul>
            <li><a href="#">QQ交谈</a></li>
            <li><a href="#">QQ交谈</a></li>
            <li><a href="#">QQ交谈</a></li>
            <li><a href="#">QQ交谈</a></li>
            <li><a href="#">QQ交谈</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $_online = $("#online_servies");
        var $_online_t = $("#online_servies .title");
        var $_online_c = $("#online_servies .con");
        t_width = $_online_t.outerWidth();
        t_height = $_online_t.height() + 1;
        c_width = $_online_c.outerWidth();
        c_height = $_online_c.outerHeight();
        $_online.hover(
        function () {
            $(this).width(t_width + c_width);
            $(this).height(c_height);
            $_online_t.animate({ right: 170 }, 300);
            $_online_c.delay(300).fadeIn("fast");
        },
        function () {
            $_online_c.fadeOut("fast");
            $_online_t.delay(200).animate({ right: 0 }, 200);
            $(this).width(t_width);
            $(this).height(t_height);
        }
        );
    })
</script>
</body>
</html>
IE6下会不断收缩和打开，能帮我看看吗？
另外，有没有更好的实现方法。

解决方案 »

  1.   

     $(this).width(t_width + c_width);
                $(this).height(c_height);
                $_online_t.animate({ right: 170 }, 300);改为 $(this).width(t_width + c_width);
                $(this).height(c_height);
                $_online_t.animate({ right: '170px' }, 300);
      

  2.   

    <!doctype html>
    <html>
    <head>
        <title>在线客户</title>
        <style type="text/css">
        body { font-size:12px;}
        ul { list-style:none;}
        #online_servies { position:fixed;_position:absolute;right:0px;top:200px; width:200px; height:252px;}
        #online_servies .title {  position:absolute; width:29px; height:130px; right:0px; border:1px solid #E3E3E3; border-top:none; border-right:none; margin:60px 0;cursor:pointer;}
        #online_servies .title .ico { width:29px; background:#3DA7CC; height:28px;} 
        #online_servies .title .text {width:10px; padding:15px 9px; height:70px; line-height:18px; color:Gray;}
        #online_servies .con { position:absolute;width:168px;height:250px;right:0px;border:1px solid #E3E3E3;border-bottom-left-radius:3px;border-top-left-radius:3px; display:none;}
        #online_servies .con ul { padding:20px;}
        #online_servies .con ul li { height:22px;line-height:22px; margin:5px 0;}
        </style>
    </head>
    <body>
    <!-- online --> 
    <div id="online_servies">
        <div class="title">
            <div class="ico"></div>
            <div class="text">在线客服</div>
        </div>
        <div class="con">
            <ul>
                <li><a href="#">QQ交谈</a></li>
                <li><a href="#">QQ交谈</a></li>
                <li><a href="#">QQ交谈</a></li>
                <li><a href="#">QQ交谈</a></li>
                <li><a href="#">QQ交谈</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $_online = $("#online_servies");
            var $_online_t = $("#online_servies .title");
            var $_online_c = $("#online_servies .con");
            t_width = $_online_t.outerWidth();
            t_height = $_online_t.height() + 1;
            c_width = $_online_c.outerWidth();
            c_height = $_online_c.outerHeight();
            /*$_online.hover(
            function () {
                $(this).width(t_width + c_width);
                $(this).height(c_height);
                $_online_t.animate({ right: '170px' }, 300);
                $_online_c.delay(300).fadeIn("fast");
            },
            function () {
                $_online_c.fadeOut("fast");
                $_online_t.delay(200).animate({ right: 0 }, 200);
                $(this).width(t_width);
                $(this).height(t_height);
            }
            );*/

    $_online.toggle(
     function () {
                $(this).width(t_width + c_width);
                $(this).height(c_height);
                $_online_t.animate({ right: '170px' }, 300);
                $_online_c.delay(300).fadeIn("fast");
            },function () {
                $_online_c.fadeOut("fast");
                $_online_t.delay(200).animate({ right: 0 }, 200);
                $(this).width(t_width);
                $(this).height(t_height);
            }
    );

        })
    </script>
    </body>
    </html>
      

  3.   

        $(function () {
            var $_online = $("#online_servies");
            var $_online_t = $("#online_servies .title");
            var $_online_c = $("#online_servies .con");
            t_width = $_online_t.outerWidth();
            t_height = $_online_t.height() + 1;
            c_width = $_online_c.outerWidth();
            c_height = $_online_c.outerHeight();
            $_online.hover(
            function () {
                $(this).width(t_width + c_width);
                $(this).height(c_height);
                $_online_t.animate({ right: 170 }, 300);
                $_online_c.delay(300).fadeIn("fast");
            },
            function () {
    ////////////////////////////////这2句提前就行了
                $(this).width(t_width);
                $(this).height(t_height);
    ////////////////////////////////
                $_online_c.fadeOut("fast");
                $_online_t.delay(200).animate({ right: 0 }, 200);
            }
            );
        })