Jquery的FadeIn函数第一次不工作

Jquery FadeIn function not working in first time

本文关键字：工作 第一次 函数 FadeIn Jquery      更新时间：2023-09-26

我使用下面的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>

这里是jsrc: http://jsfiddle.net/mmubashirs/zoctx3f3/

试试这个:

$( 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);
  });
});

请检查这个提琴

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

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

代码是正确的。它在

下面工作

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

相关文章：