Jquery slide奇妙な振る舞い

jqueryを使用して私のドロップダウンのアニメーションを作成していますので、クリックするたびにドロップダウンまたはアップします。しかし、私は奇妙なアニメーションを取得します。私もカスタムタグと属性を使用しているが、私はそれが彼らのせいだとは思わない。Jquery slide奇妙な振る舞い

これはアニメーションのjqueryです。

$("ul").click(function(){ 
    $(":nth-child(2)",this).slideToggle(parseInt($(":nth-child(2)",this).attr("speed"))); 
});

でも、本当にjqueryではないと思います。それはCSSで何かです。ここ

ul{ 
display:inline-block; 
font-family:arial; 
border: 1px solid gray; 
text-align:left; 
} 
uh{ 
display:inline-block; 
} 
li{ 
list-style:none; 
font-size:14px; 
color:#525252; 
cursor:default; 
} 
li:hover{ 
background-color:#CFCFCF; 
}

は私が作ったバイオリンです： https://jsfiddle.net/pcrdhk03/

出典

2016-10-29 Nick

あなたuhはdisplay:block;なくdisplay:inline-block;を持っている必要がありますか、それはアニメーションとあなたあなた幅の増加の間にインラインになります。

fiddleが更新されました。あなたはまた、より良いアニメーションのためにそのような何かに切り替える必要があります

EDIT

：

DEMO

$(document).ready(function() { 
 
    $("hold").hide(); 
 

 

 

 
    $("ul").click(function() { 
 
    $("hold", this).slideToggle(parseInt($("hold", this).attr("speed"))); 
 
    }); 
 

 
    $("li").click(function() { 
 
    var p = $(this).parents(); 
 
    $("uh", p).html($(this).html()); 
 
    $("li.hided", p).removeClass('hided'); 
 
    $(this).addClass('hided'); 
 
    }); 
 

 

 
});

ul { 
 
    display: inline-block; 
 
    font-family: arial; 
 
    border: 1px solid gray; 
 
    text-align: left; 
 
} 
 

 
uh { 
 
    display: block; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    font-size: 14px; 
 
    color: #525252; 
 
    cursor: default; 
 
} 
 

 
li:hover { 
 
    background-color: #CFCFCF; 
 
} 
 

 
.hided { 
 
    display:none; 
 
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
<body> 
 
    <ul> 
 
    <uh>Volksvagen</uh> 
 
    <hold speed="300"> 
 
     <li class="hided">Volksvagen</li> 
 
     <li>Renault</li> 
 
     <li>BMW</li> 
 
     <li>car</li> 
 
     <li>behicle</li> 
 
     <li>Subaru</li> 
 
    </hold> 
 
    </ul> 
 

 
</body>

より良いアニメーションが必要な場合は、 https://select2.github.io/

出典

2016-10-29 20:16:21 paolobasso

のようなjqueryプラグインを使用する必要があります。アニメーションの最後に小さなジャンプがあります。何が原因なの？ – Nick

幅や高さのジャンプ？ – paolobasso

高さ。私は普通のスタイルのドロップダウンで試してみましたが、そこではアニメーションの半分がカットされます。 – Nick

Jquery slide奇妙な振る舞い

答えて

関連する問題