重複の可能性:
slideDownが最後に突然ジャンプする
視覚的な不具合であるため、自分のサイトをリンクする以外に何が起こっているかを示す良い方法はありません。
ユーザーが[追加]をクリックしたときにdivを表示/非表示にするためにjqueryを使用しています。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;
}
入力に関係していることは確かですが、何が悪いのかわかりません。