在淡出另一个元素后淡入一个元素并没有真正起作用

Question

我创建了一个名为 "Pumpn Records" 的网站，现在快完成了。在该网站上有一个名为 "Releases" 的部分。它 div 分为两个部分，但只有一个是可见的。这是网站：http://s448350928.online.de/pumpn/records/index3

那里的发布部分有这个 html 代码（简化）：

<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">   </script>
<script>
function hide2014and2016show2015()
 {
 $("#2014").fadeOut(4000);
 }
</script>
<script>
 $(document).ready(function(){
 $("#2015").hide();// hide it initially
 $('#forward2014').click(function(){
    $("#2015").delay(4000).fadeIn(4000);                            });
 });
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
    <div class='container3' style="overflow:visible;">
        <h2>EPs</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Ganz Okay EP (Instrumental)</h3>
            </a>
        </div>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Ganz Okay EP</h3>
            </a>
        </div>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Viernacheins EP</h3>
            </a>
        </div>
    </div>
</div>
<div id="2015">
    <div class='container3' style="overflow:visible;">
        <h2>Alben</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Larmoyanz</h3>
            </a>
        </div>
    </div>
    <div class='container3' style="overflow:visible;">
        <h2>EPs</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Mrs. EP</h3>
            </a>
        </div>
    </div>
</div>
</div>

如果您查看发布部分，您会看到这个标题（“2014”）。这个标题的左边和右边是箭头，或者我认为它们被称为插入符。 :D

我想编码的是：当有人点击右箭头时，id 为“2014”的 div 应在 4000 毫秒后淡出，然后 id 为“2015”的 div 应在 4000 毫秒后淡入。我在“2015”div 淡入之前延迟了时间。同样是 4000 毫秒，所以“2015”的淡入应该在“2014”的淡出结束后立即开始。

真正发生的是：http://i.stack.imgur.com/hxLVB.gif

那么为什么它不起作用？在过去的几个小时里，我在 google 和 Whosebug 上搜索了很多次，并且经常更改该代码，但它仍然无法正常工作。 :(

更新： 现在我知道问题是什么，但我无法解决它。这个网站是一个单页网站，所以我有一个 javascript 插件。它叫做 fullpage.js，我知道它是如何工作的。当您用鼠标滚动时，它会在 "page-container fullpage-wrapper" 上添加 "transform: translate3d(x, y, z);" 属性，并更改 y-value，因此页面会下降。所以我制作了两个小提琴来演示这个问题：

不工作FIDDLE（其中包含转换属性）：

jsfiddle.net/ktf9onjo/（抱歉，我不允许 post 超过两个可点击链接...）

正在工作FIDDLE:

jsfiddle.net/rant5af9/

你看问题出在变换属性。

为什么???
我需要一个替代品。我不能只删除它，脚本会每次滚动时都会被读取。
是的，我可以将 translate3d(x, y, z) 更改为 translateY(y)，但是不行，那行不通，我试过了。 :D

信息：您可以在两个小提琴的 javascript 框中找到 fullpage.js。

PS: 网站还没有完成。很多链接和其他东西目前都不起作用。

请帮助，fanx！ :)

Answer 1

我没有得到你真正需要的东西，但要使 jquery 动作按顺序进行，你必须调用第二个动作并像这样回调

$('#whatever').fadeOut('slow', function() {
    $('#whatever').delay(4000).fadeIn('slow');
});

See This

Answer 2

为什么会出现这个问题

正如@kosmos 在评论中所解释的那样：

Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.

解决方案

jQuery fadeOut 函数接受一个 complete 回调函数 (source).

淡出完成后执行此回调函数。您不再需要以这种方式使用 delay，您的动画链接将保持同步。

html:

<div id="forward2014" style="display:inline-block">

javascript:

$('#forward2014').click(function(){
  $("#2014").fadeOut(4000, function(){
    // this starts when the fadeOut is finished
    $("#2015").fadeIn(4000);
  })

});

此代码段中的演示

（单击 >> 作为前进按钮）

$(document).ready(function(){

  $("#2015").hide();

  
  $('#forward2014').click(function(){
  
    $("#2014").fadeOut(4000, function(){
    
      // this starts when the fadeOut is finished
    
      $("#2015").fadeIn(4000);
  
    })

  });
});

<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

进一步说明：

您可能想要使用 jQuery 的 .on 事件侦听器函数 (reference)。您可以用它替换 onclick= 和 .click。这将使您的代码更易于管理且性能更高。
您的 html 中的 ID 应该至少包含一个字母 (source)。将 id="2014" 替换为 id="year-2014" 或类似的东西。

在淡出另一个元素后淡入一个元素并没有真正起作用

fadeIn of an element after fading out another one isn't really working

html

javascript

jquery

fadeout

fadein

为什么会出现这个问题

解决方案

此代码段中的演示

进一步说明：