Wenn ein Bereich mit JQuery ausgeblendet wird, springt mein Eingabefeld nach links. Wie es zu bekommen, um zu gleiten?

Question

Ich habe einen Bereich, der 2 Optionsfelder und 2 Beschriftungen enthält. Wenn ein Benutzer einen bestimmten Wert aus einer Dropdown-Liste auswählt, ist es nicht zutreffend, dass die Optionsfelder angezeigt werden, also blende ich sie aus. Wieder, wenn ein anderer Wert ausgewählt wird, blende ich sie wieder ein.

Wenn ich den Bereich, der sie enthält, ausblende, springt das Texteingabefeld auf der rechten Seite des Bereichs nach links, um den leeren Raum zu füllen. Wie kann ich das Texteingabefeld nach links gleiten, anstatt zu springen, wenn der Bereich ausgeblendet ist und auch wieder nach rechts gleitet, wenn der Bereich eingeblendet wird?

Die ID des Texteingabefeldes ist responseInput.

    $("#logicSelect").change( function(){
    if($("#logicSelect").val() == 10 || $("#logicSelect").val() == 9){
        $("#checkBoxes:visible").fadeOut();
        $("#newReponseRadio").val("false");
        $("#existingResponseRadio").val("true");
    }else{
        $("#checkBoxes:hidden").fadeIn();
    };
});

EDIT 1:

Ein kurzes Update. Ich habe versucht, die Folie und verblassen zu tun, aber es funktioniert nicht sehr gut.

    if($("#logicSelect").val() == 10 || $("#logicSelect").val() == 9){
        $("#checkBoxes:visible").animate({
           opacity: 0
           }, 2000, function(){
            $("#checkBoxes").hide("slide", { direction: "left" }, 2000);
        });
    }else{
        $("#checkBoxes:hidden").animate({
           opacity: 100
           }, 2000, function(){
            $("#checkBoxes").show("slide", { direction: "right" }, 2000);
        });
    }

Erstens: Die Ausblendanimation funktioniert einwandfrei. Wenn ich die Überblendung zurück zu 100% seine sofortige und nicht schrittweise tun. Auch wenn es die Folie tut das Eingabefeld beschließt, die nächste Zeile zu springen und wieder zurück aus irgendeinem seltsamen Grund, als ob seine Größenänderung der Elemente. Hat jemand eine Idee? Ich habe gerade erst begonnen, JQuery heute zu tun, also wenn ich bin dichte lassen Sie mich wissen.

EDIT 2:

Wenn Sie den Schieberegler allein und ohne die anderen Funktionen ausführen, springen die Kontrollkästchen der Elemente immer in eine neue Zeile. Warum springt die Spanne zwischen den Zeilen?

EDIT 3:

Okay, nur um das klarzustellen. Ich habe 3 Dropdowns, die Spanne mit den Radio-Buttons (die ich versuche zu verblassen und Folie) und dann eine endgültige Dropdown-Liste. Wenn ich die gleitende die Spanne und die endgültige Dropdown-Liste gehen immer auf eine neue Zeile? so bin ich an dieser Stelle im Moment stecken.

Answer 1

Mit fadeOut, sobald die Deckkraft Null erreicht, setzt jQuery die display des Elements zu none . Das ist die Ursache für den "Sprung". Mein Ansatz wäre es, direkt animate die Deckkraft, anstatt "fadeout" zu verwenden (so dass das Element immer noch Platz einnimmt, obwohl es unsichtbar ist), dann ketten Sie es mit einer slide auf das Element, das nun unsichtbar ist.

Bearbeiten: hide("slide") macht im Wesentlichen das, was Sie wollen: jsfiddle

Answer 2

Sie müssen Animationen verketten. Trick ist auch relative Position auf Ihrem Eingabeelement zu haben, dass es nicht nach links gezogen wird, wenn die Spanne unsichtbar wird.

Die folgenden Werke:

<div>
    <span id="fade-me">Fade out</span> 
    <input id="slide-me" type="text" value="My input" />
</div>
<div>
    <input id="animate" name="animate" type="submit" value="Go !" />
</div>

<script type="text/javascript">  
<!--
    $(document).ready(function() { 
        var spanWidth = $('#fade-me').outerWidth();
        $('#animate').click(function() {
            $('#fade-me')
            .css("position", "relative")
            .css("left", spanWidth+"px")
            .animate({ "left": "-="+spanWidth+"px" }, 1000);
        }); 
    }); 
//-->
</script>

Wahrscheinlich müssen Sie ein paar Änderungen vornehmen, damit es auf Ihrer Seite funktioniert und wiederverwendet werden kann.

Answer 3

Sie könnten auch versuchen, margin-left auf das "springende" Element zu setzen, sobald die Schaltflächen ausgeblendet sind, und es wieder auf seinen ursprünglichen Wert zu setzen, sobald die Schaltflächen eingeblendet werden.

Wenn das Layout es zulässt, können Sie auch einen Container für die eingeblendeten Schaltflächen einrichten, der immer dort bleibt und eine feste Breite hat.

Für Animationen, die sofort ausgelöst werden oder auf das Ende einer anderen Animation warten, schauen Sie sich die jQuery-Funktion .stop() Funktion.