사파리에 포스트 jQuery 플래시가있는 이유는 무엇입니까?

Question

마우스를 가져갈 때까지 숨겨진 단순한 검색 상자가 있으며 마우스를 올리면 다시 숨 깁니다. Firefox에서는 모두 정상이지만 Safari에서는 전체 막대가 표시되는 숨기기 애니메이션 이후에 작은 플래시가 있습니다. 내 사이트 홈페이지 (stormink.net)에서 무슨 일이 일어나고 있는지 (Safari에서만) 확인할 수 있습니다.

<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'); 
    } 
    ); 
}); 

가 여기

는 HTML입니다 (검색 버튼은 오른쪽 상단에 있습니다) 이걸 제거 할 방법이 없나요? 아니면 표준 jQuery일까요? 그것은 꽤 산만해질 것입니다. 다행스럽게도 Safari에서는 Firefox가 아니지만 여전히 재미는 없습니다 ...

감사합니다!

Answer 1

나는 그렇게 이유를 잘 모르겠지만, 도움이 될 한 것은 숨기기 기능에 대한 두 번째, 선택적 콜백 funciton을 활용하는 것입니다 :

$(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;) 이것을 hover 이벤트에 사용합니다. 배경을 작은 검색 아이콘으로 설정하십시오.

이 은 일 수 있습니다. 제대로 보이기 위해서는 조금만 더 놀아야 할 수도 있지만.

그런데, 나는 디자인을 좋아합니다. 일단 거기에 약간의 콘텐츠를 얻으면 놀라운 일이 될 것입니다. 너는 정말 재능이있어. :) 당신은 일을위한 디자인을합니까, 아니면 그냥 연주합니까?