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

我不确定为什么会发生这种情况，但有一点可能有用，就是利用hide函数的第二个可选回调函数：

$(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;）并将其用于悬停事件。将其背景设置为小搜索图标。

这个可能有效，但你可能需要多玩一点才能让它看起来正确。

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

为什么在Safari中有一个post-jQuery flash？

1 个答案: