Question

基本上我试图在指定的时间后淡出div 1。在div 1淡出之后，div 2将很快消失。

$("#title").hide(function(){
  $("#title").fadeIn(5000).next().delay('500', function(){
    $("#title").fadeOut(5000);
    $("#hub").hide(function(){
      $("#hub").fadeIn(5000);
    });
  });
});

Answer 1

我建议以不同的方式选择div，.next（）在这方面是一个有用的函数，在这个例子中可以用来替换例如'#hub'的显式引用。

socket.emit('getMessage', 'msg')

Answer 2

我认为你正在寻找这个，只需使用setTimeout函数：

＆＃13;

$(document).ready(function(){
    setTimeout(function(){
         $("#title").fadeIn(2000)
         $("#hub").fadeIn(4000)
        }, 2000);
        setTimeout(function(){
         $("#title").fadeOut(4000)
         $("#hub").fadeOut(2000)
        }, 2000);
});

＆＃13;

#hub, #title{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/hwyw5ssf/6/

<head>
	<title></title>
</head>
<body>
	<div>
		<form id="form1">
			<input type="text" name="">
			<select>
				<option value=""></option>
				<option value="1">1</option>
				<option value="2">2</option>
			</select>
			<input type="checkbox" name="" value="Yes" checked="">Yes
		</form>
	<div>
		<button id="button" onclick="getVal()" >Copy</button>
	</div>
</div>
<div id="hiddenDiv">
</div>
</body>

$('div').hide();
$('#title').fadeIn("slow", function(){
  $(this).fadeOut("slow", function(){
    setTimeout(function(){
      $('#hub').fadeIn("slow");
    }, 2000);
  });
})

第一个div将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="title">Help please.</div> <div id="hub">not sure what to do</div>立即＆amp;在第一个div的fadeOut之后，第二个div将fadeout。

对于2秒的差距，我使用了2sec

希望这会对你有所帮助。

jQuery fadeIn / fadeOut

3 个答案: