Div當fadeIn（）改變位置（）

我試圖在一些自定義div中進行動態搜索，並且搜索功能在一些Javascript和fadeIn（）和fadeOut（）方面運行良好，但是當第一個自定義div淡出然後再次消失，div已經移動了。比其他人高10 px。Div當fadeIn（）改變位置（）

代碼：（見的jsfiddle全HTML）http://jsfiddle.net/fxdu5355/ HTML：

<div class="col-lg-12"> 
<div class="col-lg-12"> 
    <div class="col-lg-8 col-md-8 col-sm-8"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       Search 
      </div> 
      <div class="panel-body"> 
       <div class="col-lg-8 col-md-10 col-sm-12"> 
        <input type="text" class="form-control" id="search" title="Search Silos" placeholder="Search"/> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-lg-12 no-link"> 
    <ul id="siloList"> 
     <li> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <a href="#" class="no-link"> 
        <div class="panel panel-info silo-link silo-panel"> 
         <div class="panel-heading"> 
          <h3>Novo Nordisk</h3> 
         </div> 
         <div class="panel-body"> 
          12 private Sources<br/> 
         </div> 
        </div> 
       </a> 
      </div> 
     </li> 
     <li> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <a href="#" class="no-link"> 
        <div class="panel panel-info silo-link silo-panel"> 
         <div class="panel-heading"> 
          <h3>Coloplast</h3> 
         </div> 
         <div class="panel-body"> 
          27 private Sources<br/> 
         </div> 
        </div> 
       </a> 
      </div> 
     </li> 
     <li> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <a href="#" class="no-link"> 
        <div class="panel panel-info silo-link silo-panel"> 
         <div class="panel-heading"> 
          <h3>Antarktis</h3> 
         </div> 
         <div class="panel-body"> 
          2 private Sources<br/> 
         </div> 
        </div> 
       </a> 
      </div> 
     </li> 
     <li> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <a href="#" class="no-link"> 
        <div class="panel panel-info silo-link silo-panel"> 
         <div class="panel-heading"> 
          <h3>Novartis</h3> 
         </div> 
         <div class="panel-body"> 
          143 private Sources<br/> 
         </div> 
        </div> 
       </a> 
      </div> 
     </li> 
    </ul> 
</div>

的Javascript搜索功能：

$("#search").keyup(function() 
{ 
    // Retrieve the input field text and reset the count to zero 
    var filter = $(this).val(); 
    // Loop through the comment list 
    $("#siloList li").each(function() 
    { 
     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) 
     { 
      // Show the list item if the phrase matches and increase the count by 1 
      $(this).fadeOut(); 
     } 
     else 
     { 
      $(this).fadeIn(); 
     } 
    }); 
});

我希望有人能幫助我在這裏。

在此先感謝。

/麥克

來源

2014-08-28 DonBananMike

哪來小提琴鏈接？ – patrykf 2014-08-28 08:51:51

哈哈...好問題！：D在這裏你走了。對不起。 http://jsfiddle.net/fxdu5355/ – DonBananMike 2014-08-28 08:52:49

您確定選擇了作品嗎？我不能寫任何輸入 – patrykf 2014-08-28 08:54:55

拆卸#siloListdisplay: inline規則似乎解決這個問題。

Updated Demo

來源

2014-08-28 09:04:16

這樣做。非常感謝你：） – DonBananMike 2014-08-28 09:08:23

Div當fadeIn（）改變位置（）

回答

相關問題