jquery - 为什么 Safari 中会有后 jQuery 的 flash？

Question

我有一个简单的搜索框，它一直隐藏到悬停(悬停)并在悬停(悬停)时再次隐藏。在 Firefox 中，一切正常，但在 Safari 中，隐藏动画后有一个微小的闪光，可以看到完整的栏。您可以在我网站的主页上看到正在发生的事情(仅在 Safari 中):stormink.net . (搜索按钮在右上角)

这是 HTML:

<form id="searchForm"> <label id="searchButton" for="searchBox" value="Search"></label>
<input id="searchBox" type="text" value="Search...">
</form>

CSS:

#searchForm { float: right; background-color: #333333 }
    #searchButton { 
        display: block; float: left; 
        height: 24px; width: 32px; 
        background: url(/images/STORMINKsprite.png) no-repeat;
        background-color: transparent;
        background-position: -325px 0;
        }
    #searchBox { 
        display: none; float: left;
        margin: 5px 5px 0 0;
        padding: 0 3px;
        border: none;
        background-color: transparent;
        color: #ffffff;
        height: 15px;
        }

还有 jQuery:

$(document).ready(function() {
    $('#searchForm').hover(
    function(){
        $('#searchBox').show('slow');
    },
    function(){
        $('#searchBox').hide('slow');
    }
    );
});

有什么办法可以解决这个问题，还是只是标准的 jQuery？这会很让人分心。幸运的是它在 Safari 而不是 Firefox 中，但仍然不是很有趣...

谢谢大家!

Answer 1

我不确定为什么会发生这种情况，但可能有帮助的一件事是利用隐藏函数的第二个可选回调函数:

$(document).ready(function() {
    $('#searchForm_trigger').hover(
    function(){
        $('#searchBox').css({display: "inherit"});
        $('#searchBox').show('slow');
    },
    function(){
        $('#searchBox').hide('slow', function() {
            $("#searchBox").css({display: "none"});
        });
    }
    );
});

您必须稍微修改您的设计才能做到这一点，因为它都是一个对象。在右上角放置一个名为 searchBox_trigger 的固定 div (CSS: position: fixed; right: 0; top: 0;) 并将其用于悬停事件。将其背景设置为小搜索图标。

这可能有效，尽管您可能需要多玩一些才能让它看起来正确。

顺便说一句，我喜欢这个设计。一旦你在那里获得了一些内容，那将会是惊人的。你真的很有才华。 :) 你做设计是为了工作，还是为了玩？