用Javascript创建跟随按钮

Question

我在这里获得有关为什么我的javascript不能用于“跟随”按钮的答案，因为我添加了所有CDN和脚本，但仍然无法正常工作。 我的代码在做什么错？

 $(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> 

有解决此类型错误的解决方案吗？ 我尝试了谷歌，但没有答案。 我以为你们可以帮忙。

感谢您的所有帮助！

Answer 1

您的代码中的一些问题：

1. easeInOutBack未定义，因此使用内置的缓动函数= linear或swing

2. $("#follow-button").css("color", "#fff"); 将导致文本和背景颜色相同，因此改用#2EB82E 。

您可以检查JQuery animate（）的详细信息。

修复它们后，代码将如下所示：

 $(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")

您正在将按钮文本与“ + Follow”进行比较，但您的按钮文本仅为“ Follow”，因此您的if块将永远不会运行。

另请参阅亚当的答案，以获取/设置按钮内容的正确方法。

Answer 4

您正在使用的easings未定义，这就是为什么您会收到错误。

请检查jQuery Easings主页以获取更多信息。

我已经修复了您的错误，但是我想您的代码仍然需要一些改进的样式和颜色。

 $(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>