用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>