검색 상자가 지연되어 검색 전환시기가 일치합니다.

1 단계 : 사용자 클릭 검색 : 번역해야합니다 (작동 중). 2 단계 : 번역 제안 상자가 나타나야합니다 (작동하지 않음). 3 단계 : 화면의 다른 곳을 클릭하면 검색 창이 원래 위치로 돌아갑니다 (작동 중). 4 단계 : 검색 창을 원래 위치로 번역 한 후 제안 상자를 숨겨야합니다.검색 상자가 지연되어 검색 전환시기가 일치합니다.

// Spotlight toggles 
 
$(function() { 
 
    $('.results').hide(); 
 
    
 

 
    $("#morphsearch").click(function() { 
 
    $(this).toggleClass("active"); 
 
    $('.morphsearch').toggleClass("active"); 
 
    
 
    }); 
 
    
 
    $('#toggle').focus(function(){ 
 
    $('.results'+ this.value).show(); 
 
    }); 
 
    
 
    $('#toggle').on("focusout", function(){ 
 
    $('.morphsearch').toggleClass("active"); 
 
    $('#morphsearch').toggleClass("active"); 
 
    }); 
 
    
 
}); 
 

 

 

 
</script> 
 
\t \t <script> 
 

 
$('#toggle').on('click blur', function(){ 
 
    $('.morphsearch-input').toggleClass('expanded'); 
 
}); 
 
</script>

body { 
 
     background: #434343; 
 
     } 
 

 
.morphsearchinput { 
 
    -webkit-transition: width .8s , height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 

 
    min-width: 50px; 
 
    
 
    width: 0%; 
 
    
 
    
 
    position: absolute; 
 
    left: 200px; 
 
    top: 50px; 
 
} 
 

 
.expanded { 
 
    width: 80% !important; /* !important because min-width is stronger than width */ 
 
    transform: translate(100px,0px); \t 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
/* ------------ App Styles ------------ */ 
 

 

 

 

 

 

 

 

 
.morphsearch .morphsearch-form input:focus { 
 
    outline-width: 0; 
 
} 
 
.morphsearch .results { 
 
    font-size: 12px; 
 
    margin: 0; 
 
\t background: #f1f1f1; 
 
    padding: 0 0 5px 0; 
 
    border-radius: 0 0 5px 5px; 
 
    box-shadow: inset 0 0 0 1px #B5B5B5, 0 4px 8px rgba(0, 0, 0, 0.2); 
 
    /* ------------ This is my test code------------ */ 
 
    min-width: 400px; 
 
    
 
    width: 0%; 
 
    
 
    
 
    position: absolute; 
 
    left: 112px; 
 
    top: 30px; 
 
    -webkit-transition: width .8s , height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 
    -webkit-transition-delay: 2s; /* Safari */ 
 
    transition-delay: 2s; 
 
\t /* ----------- end of test code------------ */ 
 
} 
 
.morphsearch .results ul.section { 
 
    margin: 0; 
 
    padding: 9px 0 0; 
 
    list-style: none; 
 
} 
 
.morphsearch .results ul.section li a { 
 
    padding: 0 0 0 125px; 
 
    display: block; 
 
    color: #333; 
 
    line-height: 20px; 
 
    cursor: default; 
 
} 
 
.morphsearch .results ul.section li a .result { 
 
    display: none; 
 
} 
 
.morphsearch .results ul.section li a:hover, .morphsearch .results ul.section li a .active { 
 
    background: linear-gradient(to bottom, #7693F5 0%, #265AF2 100%); 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.morphsearch .results ul.section li a:hover .result, .morphsearch .results ul.section li a .active .result { 
 
    display: block; 
 
    position: absolute; 
 
    margin: -75px 0 0 -531px; 
 
    color: #000; 
 
    border: 1px solid #B5B5B5; 
 
    background: linear-gradient(to bottom, #FDFDFD 0%, #EAEAEA 100%); 
 
    width: 372px; 
 
    height: 120px; 
 
    padding: 10px; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 0 0 1px #fff; 
 
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -moz-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -ms-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -o-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
} 
 
.morphsearch .results ul.section li a:hover .result i, .morphsearch .results ul.section li a .active .result i { 
 
    float: left; 
 
    display: block; 
 
    margin-right: 10px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result i.folder, .morphsearch .results ul.section li a .active .result i.folder { 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: 0 -16px; 
 
    width: 112px; 
 
    height: 90px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result .details, .morphsearch .results ul.section li a .active .result .details { 
 
    float: left; 
 
} 
 
.morphsearch .results ul.section li a:hover .result .details div, .morphsearch .results ul.section li a .active .result .details div { 
 
    margin: 5px 0; 
 
} 
 
.morphsearch .results ul.section li a:hover .result .details div.title, .morphsearch .results ul.section li a .active .result .details div.title { 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
    margin-top: 0; 
 
} 
 
.morphsearch .results ul.section li a:hover .result.website, .morphsearch .results ul.section li a .active .result.website { 
 
    margin: -75px 0 0 -639px; 
 
    width: 500px; 
 
    height: 500px; 
 
    padding: 3px 0 0 0; 
 
} 
 
.morphsearch .results ul.section li a:hover .result.website .page-display, .morphsearch .results ul.section li a .active .result.website .page-display { 
 
    width: 990px; 
 
    height: 998px; 
 
    position: absolute; 
 
    margin: -50% 0 0 -50%; 
 
    padding-left: 6px; 
 
    -webkit-transform: scale(0.5); 
 
    -moz-transform: scale(0.5); 
 
    -ms-transform: scale(0.5); 
 
    -o-transform: scale(0.5); 
 
    transform: scale(0.5); 
 
    border-radius: 10px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result.website:after, .morphsearch .results ul.section li a .active .result.website:after { 
 
    left: 499px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result.image, .morphsearch .results ul.section li a .active .result.image { 
 
    height: auto; 
 
    width: 385px; 
 
    padding: 2px 5px 3px 2px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result.image img, .morphsearch .results ul.section li a .active .result.image img { 
 
    border: 1px solid #ccc; 
 
    width: 385px; 
 
    height: auto; 
 
    border-radius: 3px; 
 
} 
 
.morphsearch .results ul.section li a:hover .result:after, .morphsearch .results ul.section li a .active .result:after { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-color: transparent transparent transparent #F5F5F5; 
 
    border-width: 12px; 
 
    position: absolute; 
 
    left: 391px; 
 
    top: 52px; 
 
    box-shadow: inset 0 0 1px #000; 
 
    -webkit-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -moz-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -ms-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -o-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    filter: drop-shadow(1px 0 0 #B5B5B5); 
 
} 
 
.morphsearch .results ul.section.no-preview { 
 
    padding: 6px 0 0; 
 
} 
 
.morphsearch .results ul.section.no-preview li a { 
 
    line-height: 17px; 
 
} 
 
.morphsearch .results ul.section.no-preview li a .result { 
 
    display: none !important; 
 
} 
 
.morphsearch .results ul.section.lbl li:first-of-type:before { 
 
    content: "label"; 
 
    font-size: 11px; 
 
    position: absolute; 
 
    color: #8C8C8C; 
 
    line-height: 20px; 
 
    width: 100px; 
 
    text-align: right; 
 
} 
 
.morphsearch .results ul.section.lbl li:hover:first-of-type:before { 
 
    color: #fff; 
 
} 
 
.morphsearch .results ul.section.lbl.top-hit li:first-of-type:before { 
 
    content: "Top Hit" !important; 
 
} 
 
.morphsearch .results ul.section.lbl.folders li:first-of-type:before { 
 
    content: "Folders"; 
 
} 
 
.morphsearch .results ul.section.lbl.folders li a > span { 
 
    margin-left: 24px; 
 
} 
 
.morphsearch .results ul.section.lbl.folders li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    margin-top: 1px; 
 
} 
 
.morphsearch .results ul.section.lbl.web li:first-of-type:before { 
 
    content: "Websites"; 
 
} 
 
.spotlight-search .results ul.section.lbl.web li a span { 
 
    margin-left: 24px; 
 
} 
 
.morphsearch .results ul.section.lbl.web li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: -16px 0; 
 
    margin-top: 1px; 
 
} 
 
.morphsearch .results ul.section.lbl.images li:first-of-type:before { 
 
    content: "Images"; 
 
} 
 
.morphsearch .results ul.section.lbl.images li a span { 
 
    margin-left: 24px; 
 
} 
 
.morphsearch .results ul.section.lbl.images li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: -32px 0; 
 
    margin-top: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="morphsearch" class="morphsearch"> 
 
\t \t \t \t   <form class="morphsearch-form"> 
 
\t \t \t    <input class="morphsearch-input" type="search" placeholder="Search..." id="toggle" onclick=myfunction()/> 
 
\t \t \t \t \t  
 
\t \t \t \t   </form> 
 
\t \t \t \t  
 
\t \t \t   
 
     
 
    
 
     
 
    
 

 
    
 
    
 
    <div class="results"> 
 
     <ul class="section no-preview"> 
 
     <li> 
 
      <a href="#"> 
 
      <span>Show All in Finder</span> 
 
      <div class="result"></div> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     <ul class="section lbl images top-hit"> 
 
     <li> 
 
       <a href="#"> 
 
        <span>bill murray</span> 
 
        <div class="result image"> 
 
         <img src="http://www.fillmurray.com/g/640/480" /> 
 
        </div> 
 
       </a> 
 
     </li> 
 
     </ul> 
 
     <ul class="section lbl images"> 
 
      <li> 
 
       <a href="#"> 
 
        <span>bill murray</span> 
 
        <div class="result image"> 
 
         <img src="http://www.fillmurray.com/g/642/482" /> 
 
        </div> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#"> 
 
        <span>murray</span> 
 
        <div class="result image"> 
 
         <img src="http://www.fillmurray.com/g/643/483" /> 
 
        </div> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
     <ul class="section lbl folders"> 
 
      <li> 
 
       <a href="#"> 
 
        <span>angular-spotlight</span> 
 
        <div class="result"> 
 
         <i class="folder"></i> 
 
         <div class="details"> 
 
          <div class="title">angular-spotlight</div> 
 
          <div class="type">Folder</div> 
 
          <div class="size"> 
 
           <span>2 KB</span> 
 
           <span>2 items</span> 
 
          </div> 
 
          <div class="modified">Last modified Dec 22, 2013, 8:14:26 PM</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
     <ul class="section lbl web"> 
 
      <li> 
 
       <a href="#"> 
 
        <span>ng-conf</span> 
 
        <div class="result website"> 
 
         <iframe class="page-display" src="http://www.ng-conf.org" frameborder="0"></iframe> 
 
        </div> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
     <ul class="section no-preview"> 
 
      <li> 
 
       <a href="#"> 
 
        <span>Spotlight Preferences...</span> 
 
        <div class="result"></div> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </div>

출처

2016-07-09 Duck_dragon

그래서 우리는이 문제를 시각화 할 수 jsfiddle 같은 자바 스크립트 샌드 박스에서 라이브 데모를 만들거나 plunker 도움이 희망 – charlietfl

https://jsfiddle.net/raghavpatnecha06/7drwyfq7/ –

https://jsfiddle.net/raghavpatnecha06/ xqqae261/ –

당신이 JQuery와의 특정 작업을 지연 할 경우 "지연"기능을 사용할 수 있습니다

이는 'fadeIn를 지연

$("#foo").delay(1000).fadeIn(400);

이것이하는 일은되었는지를 '동작을 1 초 (1000 밀리 초) 수행 한 다음 수행합니다. 여기에 대해 더 자세히 읽을 수 있습니까?

또는 당신은 자바 스크립트 기능 setTimeout(function, milliseconds)를 사용할 수는 :

setTimeout(function(){ 
    //what should be performed after a 1000 miliseconds 
    $("#foo").fadeIn(400); 
}, 1000);

http://www.w3schools.com/jsref/met_win_settimeout.asp

이봐, 난 당신의 코드를보고 자바 스크립트 부분에서 뭔가를 변경했습니다.

$(function() { 
 
    $('.results').hide(); 
 

 
}); 
 

 
$("#morphsearch").click(function() { 
 
    $(this).toggleClass("active"); 
 
    $('.morphsearch').toggleClass("active"); 
 
    }); 
 

 
// $('#toggle').focus(function() { 
 
// $('.results').delay(100).show(500); 
 
// }); 
 

 
    $('#toggle').on("focusout", function() { 
 
    $('.morphsearch').toggleClass("active"); 
 
    $('#morphsearch').toggleClass("active"); 
 
    }); 
 

 

 

 

 

 
$('#toggle').on('click', function() { 
 
    $('.morphsearch-input').addClass('expanded'); 
 
    $('.results').delay(100).show(500); 
 
}); 
 

 
$('#toggle').on('blur', function() { 
 
    $('.morphsearch-input').removeClass('expanded'); 
 
    $('.results').hide(); 
 
});

body { 
 
    background: #434343; 
 
} 
 

 
.morphsearchinput { 
 
    -webkit-transition: width .8s, height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 
    min-width: 50px; 
 
    width: 0%; 
 
    position: absolute; 
 
    left: 200px; 
 
    top: 50px; 
 
} 
 

 
.expanded { 
 
    width: 80% !important; 
 
    /* !important because min-width is stronger than width */ 
 
    transform: translate(100px, 0px); 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 

 
/* ------------ App Styles ------------ */ 
 

 
.morphsearch .morphsearch-form input:focus { 
 
    outline-width: 0; 
 
} 
 

 
.morphsearch .results { 
 
    font-size: 12px; 
 
    margin: 0; 
 
    background: #f1f1f1; 
 
    padding: 0 0 5px 0; 
 
    border-radius: 0 0 5px 5px; 
 
    box-shadow: inset 0 0 0 1px #B5B5B5, 0 4px 8px rgba(0, 0, 0, 0.2); 
 
    /* ------------ This is my test code------------ */ 
 
    min-width: 400px; 
 
    width: 0%; 
 
    position: absolute; 
 
    left: 112px; 
 
    top: 30px; 
 
    -webkit-transition: width .8s, height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 
    -webkit-transition-delay: 2s; 
 
    /* Safari */ 
 
    transition-delay: 2s; 
 
    /* ----------- end of test code------------ */ 
 
} 
 

 
.morphsearch .results ul.section { 
 
    margin: 0; 
 
    padding: 9px 0 0; 
 
    list-style: none; 
 
} 
 

 
.morphsearch .results ul.section li a { 
 
    padding: 0 0 0 125px; 
 
    display: block; 
 
    color: #333; 
 
    line-height: 20px; 
 
    cursor: default; 
 
} 
 

 
.morphsearch .results ul.section li a .result { 
 
    display: none; 
 
} 
 

 
.morphsearch .results ul.section li a:hover, 
 
.morphsearch .results ul.section li a .active { 
 
    background: linear-gradient(to bottom, #7693F5 0%, #265AF2 100%); 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result, 
 
.morphsearch .results ul.section li a .active .result { 
 
    display: block; 
 
    position: absolute; 
 
    margin: -75px 0 0 -531px; 
 
    color: #000; 
 
    border: 1px solid #B5B5B5; 
 
    background: linear-gradient(to bottom, #FDFDFD 0%, #EAEAEA 100%); 
 
    width: 372px; 
 
    height: 120px; 
 
    padding: 10px; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 0 0 1px #fff; 
 
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -moz-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -ms-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    -o-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result i, 
 
.morphsearch .results ul.section li a .active .result i { 
 
    float: left; 
 
    display: block; 
 
    margin-right: 10px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result i.folder, 
 
.morphsearch .results ul.section li a .active .result i.folder { 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: 0 -16px; 
 
    width: 112px; 
 
    height: 90px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result .details, 
 
.morphsearch .results ul.section li a .active .result .details { 
 
    float: left; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result .details div, 
 
.morphsearch .results ul.section li a .active .result .details div { 
 
    margin: 5px 0; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result .details div.title, 
 
.morphsearch .results ul.section li a .active .result .details div.title { 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
    margin-top: 0; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result.website, 
 
.morphsearch .results ul.section li a .active .result.website { 
 
    margin: -75px 0 0 -639px; 
 
    width: 500px; 
 
    height: 500px; 
 
    padding: 3px 0 0 0; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result.website .page-display, 
 
.morphsearch .results ul.section li a .active .result.website .page-display { 
 
    width: 990px; 
 
    height: 998px; 
 
    position: absolute; 
 
    margin: -50% 0 0 -50%; 
 
    padding-left: 6px; 
 
    -webkit-transform: scale(0.5); 
 
    -moz-transform: scale(0.5); 
 
    -ms-transform: scale(0.5); 
 
    -o-transform: scale(0.5); 
 
    transform: scale(0.5); 
 
    border-radius: 10px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result.website:after, 
 
.morphsearch .results ul.section li a .active .result.website:after { 
 
    left: 499px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result.image, 
 
.morphsearch .results ul.section li a .active .result.image { 
 
    height: auto; 
 
    width: 385px; 
 
    padding: 2px 5px 3px 2px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result.image img, 
 
.morphsearch .results ul.section li a .active .result.image img { 
 
    border: 1px solid #ccc; 
 
    width: 385px; 
 
    height: auto; 
 
    border-radius: 3px; 
 
} 
 

 
.morphsearch .results ul.section li a:hover .result:after, 
 
.morphsearch .results ul.section li a .active .result:after { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-color: transparent transparent transparent #F5F5F5; 
 
    border-width: 12px; 
 
    position: absolute; 
 
    left: 391px; 
 
    top: 52px; 
 
    box-shadow: inset 0 0 1px #000; 
 
    -webkit-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -moz-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -ms-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    -o-filter: drop-shadow(1px 0 0 #B5B5B5); 
 
    filter: drop-shadow(1px 0 0 #B5B5B5); 
 
} 
 

 
.morphsearch .results ul.section.no-preview { 
 
    padding: 6px 0 0; 
 
} 
 

 
.morphsearch .results ul.section.no-preview li a { 
 
    line-height: 17px; 
 
} 
 

 
.morphsearch .results ul.section.no-preview li a .result { 
 
    display: none !important; 
 
} 
 

 
.morphsearch .results ul.section.lbl li:first-of-type:before { 
 
    content: "label"; 
 
    font-size: 11px; 
 
    position: absolute; 
 
    color: #8C8C8C; 
 
    line-height: 20px; 
 
    width: 100px; 
 
    text-align: right; 
 
} 
 

 
.morphsearch .results ul.section.lbl li:hover:first-of-type:before { 
 
    color: #fff; 
 
} 
 

 
.morphsearch .results ul.section.lbl.top-hit li:first-of-type:before { 
 
    content: "Top Hit" !important; 
 
} 
 

 
.morphsearch .results ul.section.lbl.folders li:first-of-type:before { 
 
    content: "Folders"; 
 
} 
 

 
.morphsearch .results ul.section.lbl.folders li a > span { 
 
    margin-left: 24px; 
 
} 
 

 
.morphsearch .results ul.section.lbl.folders li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    margin-top: 1px; 
 
} 
 

 
.morphsearch .results ul.section.lbl.web li:first-of-type:before { 
 
    content: "Websites"; 
 
} 
 

 
.spotlight-search .results ul.section.lbl.web li a span { 
 
    margin-left: 24px; 
 
} 
 

 
.morphsearch .results ul.section.lbl.web li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: -16px 0; 
 
    margin-top: 1px; 
 
} 
 

 
.morphsearch .results ul.section.lbl.images li:first-of-type:before { 
 
    content: "Images"; 
 
} 
 

 
.morphsearch .results ul.section.lbl.images li a span { 
 
    margin-left: 24px; 
 
} 
 

 
.morphsearch .results ul.section.lbl.images li a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/spotlight-results-icons.png"); 
 
    height: 16px; 
 
    width: 16px; 
 
    background-position: -32px 0; 
 
    margin-top: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="morphsearch" class="morphsearch"> 
 
    <form class="morphsearch-form"> 
 
    <input class="morphsearch-input" type="search" placeholder="Search..." id="toggle"/> 
 
    </form> 
 

 
    <div class="results"> 
 
    <ul class="section no-preview"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>Show All in Finder</span> 
 
      <div class="result"></div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="section lbl images top-hit"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>bill murray</span> 
 
      <div class="result image"> 
 
      <img src="http://www.fillmurray.com/g/640/480" /> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="section lbl images"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>bill murray</span> 
 
      <div class="result image"> 
 
      <img src="http://www.fillmurray.com/g/642/482" /> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <span>murray</span> 
 
      <div class="result image"> 
 
      <img src="http://www.fillmurray.com/g/643/483" /> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="section lbl folders"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>angular-spotlight</span> 
 
      <div class="result"> 
 
      <i class="folder"></i> 
 
      <div class="details"> 
 
       <div class="title">angular-spotlight</div> 
 
       <div class="type">Folder</div> 
 
       <div class="size"> 
 
       <span>2 KB</span> 
 
       <span>2 items</span> 
 
       </div> 
 
       <div class="modified">Last modified Dec 22, 2013, 8:14:26 PM</div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="section lbl web"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>ng-conf</span> 
 
      <div class="result website"> 
 
      <iframe class="page-display" src="http://www.ng-conf.org" frameborder="0"></iframe> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="section no-preview"> 
 
     <li> 
 
     <a href="#"> 
 
      <span>Spotlight Preferences...</span> 
 
      <div class="result"></div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

그것은 가장 좋은 방법은 아니지만 당신이 달성하고 싶은 일이에서보세요. 이 :

출처

2016-07-09 12:08:26 IchHabsDrauf

https://jsfiddle.net/raghavpatnecha06/7drwyfq7/보세요 –

감사합니다 $ ('결과'+ this.value) .delay (1200) .fadeIn (500); 이 또한 작동합니다 –

@raghavp 당신이 대답을 좋아한다면, 그것을 오른쪽으로 표시하는 것을 망설이지 말고 – IchHabsDrauf

검색 상자가 지연되어 검색 전환시기가 일치합니다.

답변

관련 문제