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（）改变位置（）

回答

相关问题