Question

我使用下面的jQuery在点击按钮时隐藏div。但我发现了一个问题。 fadeIn第一次没有工作，但第二次工作。如何解决？

<script>
    $(".get-btn").click(function() {
        $(".container").css('z-index', '40');
        $('.container').fadeOut(500)
    });
</script>

<script>
    $(".close-btn").click(function() {
        $(".container-sec").css('z-index', '0');
        $('.container').fadeIn(500)
    });
</script>

这里是JSfiddle：http://jsfiddle.net/mmubashirs/zoctx3f3/

Answer 1

请检查this fiddle

$( ".get-btn" ).click(function() {
  $(".container").css('z-index', '40');
    $('.container').fadeOut(500)

});


$( ".close-btn" ).click(function() {
  $(".container").css('z-index', '0');
    $('.container').fadeIn(500)
});

Answer 2

试试这个：

$( document ).ready(function() {
  $( ".get-btn" ).click(function() {
    $(".container").css('z-index', '40');
    $('.container').fadeOut(500);
  });

  $( ".close-btn" ).click(function() {
    $(".container-sec").css('z-index', '0');
    $('.container').fadeIn(500);
  });
});

Answer 3

您的代码是正确的。它在

下面工作

$(document).ready(function(){
   $(".get-btn").click(function() {
        $(".container").css('z-index', '40');
        $('.container').fadeOut(500);
    });
  $(".close-btn").click(function() {
        $(".container-sec").css('z-index', '0');
        $('.container').fadeIn(500);
    });
});

.container {
  width: 100px;
  height: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button class="get-btn">hide</button>
<button class="close-btn">show</button>
<div class="container"></div>

Jquery FadeIn函数第一次不能工作

3 个答案: