0

我有两个具有单独 id 的 div 和一个样式相同的类。

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>

我想做的是让 foo_1 在 foo_2 后面淡出。

我确实试过这个；

HTML

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

jQuery

$(document).ready(function()
{
    setTimeout(function()
    {
        $("#foo_1").fadeOut("slow", function ()
        {
            $("#foo_1").remove();                
            $("#foo_1").html($("#foo_2").text());
            $("#foo_1").show();
        });
     }, 5000);
 });

​ 谢谢！

4

3 回答 3

1

在我看来，你正在做的事情有点矫枉过正。

让我总结一下：你有两个 div，它们位于同一个位置，但只有 #foo_1 是可见的，因为它在顶部。您现在想要隐藏#foo_1 以显示#foo_2。

因此，在淡出 #foo_1 的同时使 #foo_2 可见就足够了：

setTimeout(function() {
    // Make #foo_2 visible
    $('#foo_2').show();

    // Fade out #foo_1
    $('#foo_1').fadeOut('slow');
}, 5000);
于 2012-05-19T12:46:56.387 回答
1 
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);
于 2012-05-19T10:12:01.830 回答
0

只需在 ms 中使用带有参数的标准 jQuery 函数FadeOut(500)，FadeIn(500)：

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

于 2016-03-20T21:55:27.003 回答