显示或隐藏按钮使用jQuery？

Question

I have two button start and stop. on page load stop button hide and start button show. when i click start button this button hide and stop button show.

i am using .hide() method.

Jquery Code:

$(window).load(function ()
{
$('#stop').hide();
});

It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.

Answer 1

Hide it once only the button has loaded, not the whole window.

$("#stop").load(function() {
  $(this).hide();
});

Otherwise you can always use CSS to hide it with display:none;

Answer 2

也许使用CSS：

#stop { display: none; }

Answer 3

It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.

One possible solution is to use a css rule, with the id selector to hide the element like

#stop{display: none;}

Answer 4

$(document).ready(function () {
    $("#btnStop").click(function (e) {
        e.preventDefault();
        $(this).hide();
        $("#btnPlay").show();
    })
    $("#btnPlay").click(function (e) {
        e.preventDefault();

        $(this).hide();
        $("#btnStop").show();
    })
})