0

可能重复：
slideDown 在最后突然跳跃

除了链接我的网站之外，我没有其他好的方法来显示正在发生的事情，因为它是一个视觉故障。

http://rickymason.net/omnia/

当用户单击“添加”时，我正在使用 jquery 隐藏/显示 div。它可以工作，除了在 Firefox 和 chrome 中，它在打开时会“跳跃”一点。

当通过单击激活“show()”时，div 会增长到 div 应该达到的高度，然后反弹回来。

仅供参考，这是我的JS：

$(document).ready(function(){
 if ($('.springtrail_link').data('hidden') == 1) { $('#suggested').hide();}

$('.springtrail_link').click(function(){
        var hidden = $(this).data('hidden')
        var linkid = $(this).attr("id");
        var divid = "#suggested";
        if (hidden == 0)
        {
            hide(divid)
            $('.springtrail_link').data('hidden', '1');
        } else
        {
            show(divid)
            $('.springtrail_link').data('hidden', '0');
        }
});  

$('.closesuggest').click(function(){
    $("#suggested").slideUp('fast');
    $('.springtrail_link').data('hidden', '1');
});  


function show(divid)
{
    $(divid).show('fast');
}

function hide(divid) 
{
    $(divid).hide('fast');
}

这是我的观点：

<div id="closesuggest"><a class="closesuggest" href="#">Close</a></div>
<div class="cus_input">
    <form id="category_form">
        <input type="text" id="category_input" name="category_input" placeholder=" Find Category"/>
        <input type="image" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"/>
    </form>
</div>
<div id="suggestedcategories">
    <h2> Choose a predefined category!</h2>
    <ul class="suggestedul">
        <li class="keyword" data-keywordid="1">News</li>
        <li class="keyword" data-keywordid="2">Entertainment</li>
        <li class="keyword" data-keywordid="3">Sci/Tech</li>
        <li class="keyword" data-keywordid="4">Viral</li>
    </ul>
</div>

CSS：

#springtrail {
    overflow: hidden;
    padding: 4px;
    background-color: moccasin;
}

#suggested {
    position: relative;
    padding: 4px;
    overflow: hidden;
}

.cus_input {
    float:right;
    position: relative;
    background-color: white;
    width: 200px;
    height: 26px;
    border-radius: 3px;
    -moz-border-radius: 3px;
}

.cus_input #category_input {
    width: 175px;
    border: 0;
    position: absolute;
    top: 5px;
    left: 3px;
}

.cus_input #find_group {
    width: 220px;
    border: 0;
    position: absolute;
    top: 5px;
    left: 3px;
}

.cus_input #image {
    position: absolute;
    top: 3px;
    right: 0;
}

.cus_input #category_submit {
    position: absolute;
    top: 3px;
    right: 0;
}

我确定它与输入有关，但我不知道它有什么问题。

4

0 回答 0