[英]How to change text after delay - jQuery
I have two divs with individual id's and a class to style the same. 我有两个具有个人ID的div和一个类型相同的类。
foo_1 has a z-index so it's above foo_2. foo_1有一个z-index,所以它高于foo_2。
<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>
What I'd like to do is to have foo_1 fade out with foo_2 behind it. 我想做的是让foo_1淡出foo_2。
I did try this; 我试过这个;
<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>
$(document).ready(function()
{
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
$("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
});
Thanks! 谢谢!
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
// remove $("#foo_1").remove();
// line from code,
// because, its removing #foo_1 from dom,
// so in next strp you can't catch it
// $("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
Sounds to me like what you're doing is a bit of an overkill. 听起来像你正在做的事情有点矫枉过正。
Let me summarize: You have two divs, they are positioned at the same spot, but only #foo_1 is visible because it's on top. 让我总结一下:你有两个div,它们位于同一个位置,但只有#foo_1可见,因为它位于顶部。 You now want to hide #foo_1 to reveal #foo_2.
您现在想隐藏#foo_1以显示#foo_2。
So it should be sufficient to make #foo_2 visible while fading out #foo_1: 因此,当淡出#foo_1时,#foo_2可见就足够了:
setTimeout(function() {
// Make #foo_2 visible
$('#foo_2').show();
// Fade out #foo_1
$('#foo_1').fadeOut('slow');
}, 5000);
Just use standard jQuery function with parameter in ms FadeOut(500)
, FadeIn(500)
: 只需在ms
FadeOut(500)
, FadeIn(500)
使用标准jQuery函数和参数:
$(document).ready( function () { $('#foo_1').fadeOut(1500); $('#foo_2').text('No, I am!').fadeIn(1000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='foo_1' style='display:block;'> I'm awesome </div> <div id ='foo_2' style='display:none;'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.