Question

我有一些jQuery隐藏了包含图像的半个div，并在3秒后显示图像的完整大小。它在FireFox和IE中运行良好，但不适用于Chrome。有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <script src="jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        var status = "closed";
        var banner = jQuery.noConflict();
        banner(document).ready(function () {
            var sliderHalfHeight = "46px";
            var sliderFullHeight = "86px";

            // set at half height
            banner('#banner').css('height', sliderHalfHeight);  

            var autoTimer = null;

            autoTimer = setTimeout(function () {
                banner("#banner").animate({ height: sliderFullHeight }, 'slow');
                autoTimer = setTimeout(function () {
                    banner("#banner").animate({ height: sliderHalfHeight });
                }, 5000);
            }, 2000);

            banner("#open").click(function () {
                if (status == "closed") {
                    banner("#banner").animate({ height: sliderFullHeight });
                    if (autoTimer) clearTimeout(autoTimer);
                    autoTimer = null;
                    status = "open";
                }
                else {
                    banner("#banner").animate({ height: sliderHalfHeight });
                    if (autoTimer) clearTimeout(autoTimer);
                    autoTimer = null;
                    status = "closed";
                }
            });


        });
    </script>
</head>
<body>
        <div id="banner" style="overflow: hidden;">
            <img src="banner.jpg" runat="server" />
        </div>
        <div id="open">Open/Close</div>
</body>
</html>

Answer 1

似乎在我的Chrome中工作得很好，试试这个小提琴：http://jsfiddle.net/HNpwB/

使用jQuery动画半覆盖图像

1 个答案: