Ändern von Text auf einer Schaltfläche mehrmals und Verschieben eines Div mit JQuery

Question

Ich habe derzeit eine Box-div (ID = "Container"), die in der Mitte der Seite befindet. In diesem div habe ich eine Schaltfläche, die "clickMe" sagt. Was ich will, ist, dass, wenn ich auf diese Schaltfläche klicke, das div sich auf die linke Seite des Bildschirms bewegt und der Text auf dem Buttontext zu "Collapse" wechselt, und wenn ich erneut darauf klicke (collapse), kehrt das div zurück zum Bildschirmmitte und der Schaltflächentext ändert sich zu "Erweitern".

Dafür habe ich die folgenden drei Dateien:

index.php 
menu.php 
move.js 

menu.php

//........................... 
<button id="mover" type="button" >ClickMe</button> 
<script type="text/javascript" src="js/move.js"></script> 
//........................ 

move.js

var collapsed = true; //flag 

//jQuery button listener 
$("#mover").click(function() { 


    if (collapsed) { 

    console.log("phase1"); 

    //Moves div to the left of the page 
    $("#container").animate({ 
     right: '25%' 
    }, "slow"); 

    //Change the text on the button to "Collapse" (doesn't work) 
    document.getElementById("mover").innnerHTML = "Collapse"; 
    collapsed = false; 
    } else { 

    console.log("phase2"); 

    //Returns the div to the center of the page 
    $("#container").animate({ 
     left: '0%' 
    }, "slow"); 

    //Change the text on the button to "Extend" (doesn't work) 
    document.getElementById("mover").innnerHTML = "Extend"; 
    collapsed = true; 

    } 
}); 

index.php

<div class="bottom"> 
    <?php include ("menu.php"); ?>   
</div> 

Was passiert, ist, dass, wenn die Taste einmal angeklickt, die div nach links bewegt und dann in die Mitte. Der Text auf der Schaltfläche ist immer noch "ClickMe" (ändert sich nicht) und das Div bewegt sich überhaupt nicht, wenn ich noch einmal auf die Schaltfläche klicke.

Dies ist, was auf der Konsole gedruckt wird, wenn ich die Taste zum ersten Mal klicken:

VM1608 move.js:7    phase1 
VM1612 move.js:14    phase2 
VM1616 move.js:7    phase1 
VM1620 move.js:14    phase2 
VM1624 move.js:7    phase1 
VM1628 move.js:14    phase2 
move.js:7      phase1 

(wenn ich die Taste erneut klicken druckt es die gleichen 9 gibt aber die div bewegen nicht)

Nur um zu rekapitulieren Ich habe 3 Probleme mit meinem Code: Ändern Sie den Text auf der Schaltfläche, verschieben Sie das div nach links, wenn die Schaltfläche geklickt wird und in die Mitte, wenn es erneut angeklickt wird und ich dies tun können mehr als einmal. PS: Ich habe versucht, Verzögerung in der ersten if-Anweisung zu verwenden, aber ich habe das gleiche Ergebnis.

Answer 1

Ich sehe kein Problem damit, was Sie zu tun scheinen.

Dies verwendet auch den complete Rückruf in jQuery animate, um den Schaltflächentext zu ändern.

var collapsed = false; 
 

 
$('#mover').on('click', function() { 
 

 
    if (collapsed) { 
 

 
    $("#move-me").animate({ 
 
     left: 0 
 
    }, "slow", function() { 
 
    
 
    \t $('#mover').html('Original text'); 
 
    }); 
 

 
    collapsed = false; 
 

 
    } else { 
 

 
    $("#move-me").animate({ 
 
     left: '25%' 
 
    }, "slow", function() { 
 
    
 
    \t $('#mover').html('Changed text'); 
 
    }); 
 

 
    collapsed = true; 
 
    } 
 
});

#move-me { 
 
    height: 200px; 
 
    width: 200px; 
 
    left: 0; 
 
    background-color: grey; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="mover"> 
 
    Original text 
 
</button> 
 

 
<div id="move-me"> 
 

 
</div>