Jquery Folie seltsames Verhalten

Ich benutze jquery, um die Animation für meine Dropdown-Liste, so dass, wenn ich es anklicke, es nach oben oder unten fällt. Aber ich bekomme seltsame Animationen. Ich habe auch benutzerdefinierte Tags und Attribute verwendet, aber ich denke nicht, dass es ihre Schuld ist.Jquery Folie seltsames Verhalten

das ist jquery für Animation.

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

aber ich denke, es ist nicht wirklich jquery. es ist etwas mit 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; 
}

hier Geige i gemacht: https://jsfiddle.net/pcrdhk03/

Quelle

2016-10-29 Nick

Ihre uhdisplay:block; haben muss und nicht display:inline-block; oder es wird inline die Breite Anstieg während der Animationen und Sie Sie sein.

Aktualisiert fiddle.

EDIT

Sie auch so etwas für eine bessere Animation wechseln sollten:

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>

Wenn Sie eine bessere Animation wollen, sollten Sie beginnen, ein jquery-Plugin wie zu verwenden: https://select2.github.io/

Quelle

2016-10-29 20:16:21 paolobasso

wow danke, aber am Ende der Animation gibt es kleinen Sprung. Was verursacht es? – Nick

Sprung der Breite oder Höhe? – paolobasso

Höhe. und ich habe es auch mit meinem normal gestylten dropdown probiert, und dort, wenn animation spielt, wird die hälfte des textes abgeschnitten. – Nick

Jquery Folie seltsames Verhalten

Antwort

Verwandte Themen