单击按钮显示一个 div 1 秒钟然后隐藏它？ [复制]

Question

单击按钮时，我想显示一个 div 1 秒，然后将其隐藏：

<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>


  $(document).ready(function () {
  $("#infor").hide();
      $("#btnSave").click(
            function () {
                AlertSave();
            }            
        );
    });
function AlertSave() {
   $("#infor").delay(1000).fadeIn("slow");
}

这是my fiddle

你能告诉我怎么做吗？？

Answer 1

您可以简单地将fadeIn() 和fadeOut() 与delay() 之间的调用链接起来：

$(document).ready(function () {
    $("#infor").hide();
    $("#btnSave").click(AlertSave);
});
function AlertSave() {
    $("#infor").fadeIn("slow").delay(1000).fadeOut("slow");
}

http://jsfiddle.net/TrueBlueAussie/cjwj6gvx/

Answer 2

$(document).ready(function () {
  $("#infor").hide();
      $("#btnSave").click(
            function () {
                AlertSave();
            }            
        );
    });
function AlertSave() {
   $("#infor").show();
   $("#infor").delay(1000).fadeOut();
}

我认为上面的代码可以完成这项工作，尝试一下，让我知道输出是否正确

Answer 3

我来晚了，但要提一下，除了显示的所有其他答案还有其他 2 种方法..

第一种方法：利用 CSS3 动画，并使用 jQuery 添加包含动画的类，然后在动画持续时间结束后将其删除，如 JS Fiddle 1

var element =$('#infor');

$("#btnSave").click(AlertSave);

function AlertSave() {
	element.addClass('show-me');
  setTimeout(function () {
     element.removeClass('show-me');
  }, 2000);
}

#infor {
  opacity: 0;
}
.show-me {
  animation: foo 2s ease-in-out
}
@keyframes foo {
  0%, 99%, { opacity: 0; }
  25%, 75% { opacity: 1; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

---

第二个方法：利用jQuery .animate()这样的函数JS Fiddle 2

var element = $('#infor');
element.animate({'opacity': 0}, 0);

$("#btnSave").click(AlertSave);

function AlertSave() {
  element.animate({'opacity':1}, 300).delay(1000);
  setTimeout(function () {
     element.animate({'opacity':0}, 300);
    }, 1600);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

Answer 4

这样使用：

function AlertSave() {
  $("#infor").fadeIn("slow", function () {
    setTimeout(function () {
      $("#infor").fadeOut("slow");
    }, 1000);
  });
}

小提琴：http://jsfiddle.net/0zdLbqa7/

你也可以使用简写：

$("#infor").fadeIn("slow").delay(1000).fadeOut("slow");

两者的片段：

$(document).ready(function () {
  $("#infor").hide();
  $("#btnSave").click(AlertSave);
});
function AlertSave() {
  $("#infor").fadeIn("slow", function () {
    setTimeout(function () {
      $("#infor").fadeOut("slow");
    }, 1000);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

$(document).ready(function () {
  $("#infor").hide();
  $("#btnSave").click(AlertSave);
});
function AlertSave() {
  $("#infor").fadeIn("slow").delay(1000).fadeOut("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnSave">Save Click</button>
<div class="hideme" id="infor">This is a test div</div>

注意：我还建议您更改 .click() 处理程序。