點擊按鈕顯示數據

Question

我有2個按鈕Start和Walk Away。我想最初走開按鈕不應該出現，但在開始按鈕點擊走開按鈕應該出現（我不想使用切換）。

我有2個問題：

1）在開始按鈕的點擊，我能夠隱藏和顯示的第二個按鈕，但我不能掩飾最初的按鈕。 2）在「開始」按鈕上出現Walk Away按鈕後，我希望在2分鐘後自動隱藏走開按鈕。我無法做到這一點

目前正確運行的代碼是。在fiddle

$("#start").click(function() { 
 
    $("#walkaway").show(); 
 
});

<button type="submit" name="submit" id="start" value="Submit">Start</button> 
 
<button type="submit" name="submit" id="walkaway" value="Submit">Walk Away</button>

Answer 1

代碼要隱藏按鈕開始使用CSS：

#walkaway { 
    display: none; 
} 

要隱藏按鈕2秒後用delay：

$(document).ready(function() { 
    $("#start").click(function() { 
     $("#walkaway").fadeIn().delay(2000).fadeOut(); 
    }); 
}); 

演示：http://jsfiddle.net/tusharj/saytq920/2/個

文檔：http://api.jquery.com/delay/

設置一個定時器，以延遲在隊列中後面的項的執行。

Answer 2

試試這個方法：

<button type="submit" name="submit" id="walkaway" value="Submit" style="display:none">Walk Away</button> 

Answer 3

使用這種使用純jQuery的

$(document).ready(function() { 
    $("#walkaway").hide(); 

    $("#start").click(function() { 
     $("#walkaway").show(); 
     setTimeout(function() { 
      $("#walkaway").hide(); 
     }, 120000); 
    }); 

}); 

Answer 4

要開始隱藏，你可以使用CSS並將其設置爲啓動按鈕：

#walkaway { 
    display: none; 
} 

或

#walkaway { 
    visibility: hidden; 
} 

取決於你的佈局和你想要達到的目標。

要隱藏2分鐘後需要使用delay

$(document).ready(function() { 
    $("#start").click(function() { 
     $("#walkaway").fadeIn().delay(120000).fadeOut(); 
    }); 
}); 

延遲時間，毫秒作爲參數，所以120秒=2分鐘= 120.000毫秒的按鈕。

Answer 5

或者您可以使用設置超時功能如下代碼：

$(document).ready(function() { 
 
    $("#walkaway").hide(); 
 

 
    $("#start").click(function() { 
 
     $("#walkaway").show(); 
 
     setTimeout(function() { 
 
      $("#walkaway").hide(); 
 
     }, 2000); // <-- change to 120000 for 2 minutes 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="submit" name="submit" id="start" value="Submit">Start</button> 
 
<button type="submit" name="submit" id="walkaway" value="Submit">Walk Away</button>

Answer 6

你可以試試這個

$(document).ready(function() { 
    test = function() { 
     $("#walkaway").show(); 
    }; 

    test1 = function() { 
     $("#walkaway").hide(); 
    }; 

    test1(); 

    $("#start").click(function() { 
     test(); 
     setTimeout(test1, 120000); 
    }); 

});