使建议框延迟，以匹配搜索过渡的时间

时间：2016-07-09 12:00:12

标签： javascript jquery css3 javascript-events

第1步：用户点击搜索：它应该翻译（工作）。  第2步：翻译后的建议框应显示（不工作）。  第3步：当您单击屏幕中的其他位置时，搜索栏应转换回其原始位置（工作）。  第4步：搜索栏被翻译成原始位置后，应隐藏意见箱。

＆＃13;
＆＃13; 
// 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>
		<script>

$('#toggle').on('click blur', function(){
    $('.morphsearch-input').toggleClass('expanded');
});
</script>
＆＃13; 
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;
}
＆＃13; 
<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" onclick=myfunction()/>
					    
				         </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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

如果要在jquery中延迟特定任务，可以使用“延迟”功能：

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

它的作用是将'fadeIn'动作延迟1秒（1000毫秒），然后再执行它。在这里，您可以阅读更多相关信息。

https://api.jquery.com/delay/

或者您可以在javascript中使用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

嘿，我看到你的代码并在javascript部分改变了一些东西。看看这个：

$(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>

这不是最好的做法，但这是你想要实现的目标。希望这有助于：）

相关问题
最新问题