Question

点击一个按钮我想显示1秒的div然后隐藏它：

<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

我迟到了，但是，只要提及所有其他答案，就会显示另外两种方法..

第一种方法：通过使用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()处理程序。

点击一个按钮显示一个div 1秒然后隐藏它？

4 个答案: