Question

我正在尝试在一些自定义div中进行动态搜索，并且搜索功能适用于某些Javascript和fadeIn（）和fadeOut（），但是当第一个自定义div淡出然后再次淡入时， div已经移动了aprox。比其他人高10 px。

代码:(有关完整HTML，请参阅JSFiddle）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();
        }
    });
});

我希望有人能在这里帮助我。

提前致谢。

/麦克

Answer 1

删除display: inline上的#siloList规则似乎解决了这个问题。

Updated Demo

当fadeIn（）时Div改变位置

1 个答案: