Making A follow button With Javascript

Question

I'm here to get answers to why my javascript isn't working for the follow button because I add all cdn and scripts but still not working. What am I doing wrong in my code?

 $(document).ready(function(){ $("#follow-button").click(function(){ if ($("#follow-button").text() == "+ Follow"){ // *** State Change: To Following *** // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms $("#follow-button").animate({ width: '-=10px' }, 100, 'easeInCubic', function () {}); // then now we want the button to expand out to it's full state // The left translation is to keep the button centred with it's longer width $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'easeInOutBack', function () { $("#follow-button").css("color", "#fff"); $("#follow-button").text("Following"); // Animate the background transition from white to green. Using JQuery Color $("#follow-button").animate({ backgroundColor: "#2EB82E", borderColor: "#2EB82E" }, 1000 ); }); }else{ // *** State Change: Unfollow *** // Change the button back to it's original state $("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'easeInOutBack', function () { $("#follow-button").text("+ Follow"); $("#follow-button").css("color", "#3399FF"); $("#follow-button").css("background-color", "#ffffff"); $("#follow-button").css("border-color", "#3399FF"); }); } }); }); 

 #follow-button { color: #3399FF; font-family: "Helvetica"; font-size: 10pt; background-color: #ffffff; border: 1px solid; border-color: #3399FF; border-radius: 3px; width: 85px; height: 30px; position: absolute; top: 50px; left: 50px; cursor: hand; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="follow-button"> Follow</button> 

Is there a solution to fix this type of error? I tried google but no answers. I thought you guys could help.

Thanks for all the help!

Answer 1

Some issues in your codes:

1. easeInOutBack is not defined, so uses built-in easing function= linear or swing instead

2. $("#follow-button").css("color", "#fff"); will cause text and background are same color, so uses #2EB82E instead.

You can check the details for JQuery animate() .

After fix them, the codes will be like below:

 $(document).ready(function(){ $("#follow-button").click(function(){ if ($("#follow-button").text() == "+ Follow"){ // *** State Change: To Following *** // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms $("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {}); // then now we want the button to expand out to it's full state // The left translation is to keep the button centred with it's longer width $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () { $("#follow-button").css("color", "#2EB82E"); $("#follow-button").text("Following"); // Animate the background transition from white to green. Using JQuery Color $("#follow-button").animate({ backgroundColor: "#2EB82E", borderColor: "#2EB82E" }, 1000 ); }); }else{ // *** State Change: Unfollow *** // Change the button back to it's original state $("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () { $("#follow-button").text("+ Follow"); $("#follow-button").css("color", "#3399FF"); $("#follow-button").css("background-color", "#ffffff"); $("#follow-button").css("border-color", "#3399FF"); }); } }); }); 

 #follow-button { color: #3399FF; font-family: "Helvetica"; font-size: 10pt; background-color: #ffffff; border: 1px solid; border-color: #3399FF; border-radius: 3px; width: 85px; height: 30px; position: absolute; top: 50px; left: 50px; cursor: hand; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="follow-button"> Follow</button> 

Answer 2

您需要使用jQuery的html()函数，因为text()不会执行您认为应该做的事情-http://api.jquery.com/text/

$("#follow-button").html("Following");

Answer 3

if ($("#follow-button").text() == "+ Follow")

You're comparing the button text with "+ Follow" yet your button text is just "Follow" so your if block will never run.

Also see Adam's answer for the correct way to get/set the contents of your button.

Answer 4

The easings you are using are not defined, and that is why you are getting the error.

Please check jQuery Easings Main Page for more info.

I have fixed your error, but I guess your code still needs some improvements style and coloring wise.

 $(document).ready(function(){ $("#follow-button").click(function(){ if ($("#follow-button").text() == "+ Follow"){ // *** State Change: To Following *** // We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms $("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {}); // then now we want the button to expand out to it's full state // The left translation is to keep the button centred with it's longer width $("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () { $("#follow-button").css("color", "#fff"); $("#follow-button").text("Following"); // Animate the background transition from white to green. Using JQuery Color $("#follow-button").animate({ backgroundColor: "#2EB82E", borderColor: "#2EB82E" }, 1000 ); }); } else{ // *** State Change: Unfollow *** // Change the button back to it's original state $("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () { $("#follow-button").text("+ Follow"); $("#follow-button").css("color", "#3399FF"); $("#follow-button").css("background-color", "#ffffff"); $("#follow-button").css("border-color", "#3399FF"); }); } }); }); 

 #follow-button { color: #3399FF; font-family: "Helvetica"; font-size: 10pt; background-color: #ffffff; border: 1px solid; border-color: #3399FF; border-radius: 3px; width: 85px; height: 30px; position: absolute; top: 50px; left: 50px; cursor: hand; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="follow-button"> Follow</button>