Question

我创建了一个名为“Pumpn Records”的网站，它几乎已经完成了。在网站上有一个名为“发布”的部分。它分为两部分，但只有一部分是可见的。这是网站：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

<小时/> 那为什么不工作呢？我在googled和stackoverflowed在过去几个小时，并经常更改代码，但它仍然无法正常工作。：（

更新： 现在我知道问题是什么，但我无法解决。这个网站是一个单页网站，所以我有一个javascript插件。它被称为fullpage.js，我知道它是如何工作的。当您使用鼠标滚动时，它会添加“transform：translate3d（x，y，z）;”属性为“page-container fullpage-wrapper”，并更改y值，因此页面会关闭。所以我为了解决这个问题做了两个小提琴：

不工作的FIDDLE（包含transform属性）：

jsfiddle.net/ktf9onjo/（抱歉，我不允许发布两个以上的可点击链接...）

工作时间：

jsfiddle.net/rant5af9 /

您看到问题是转换属性。

WHY ???
我需要另一种选择。我不能只删除它，脚本会每次滚动时都要读它。
是的，我可以将translate3d（x，y，z）更改为translateY（y），但是nooo，这是行不通的，我试过了。：d

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

PS：该网站尚未完成。很多链接和其他东西目前都不起作用。

请帮忙，粉丝们！：）

Answer 1

为什么会出现问题

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

因为动画队列适用于每个元素动画本身。 a不会等b制作动画，但如果您尝试动画a两次，则第二个动画将等待第一个动画结束。< / p>

解决方案

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);
  })

});

此代码段中的

演示

（点击>>作为转发按钮）

＆＃13;

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

＆＃13;

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

＆＃13;

进一步评论：

您可能希望将jQuery的.on函数用于事件侦听器（reference）。您可以将onclick=和.click替换为id="2014"。这应该使您的代码更易于管理和更高效。
你的html中的id应该包含至少一个字母（source）。将id="year-2014"替换为$.ajax({ url:.., type: .., data: /* this subform's data*/ }) .done(function() { //Put code here });或类似内容。

Answer 2

我没有完全得到你需要的东西但是要对jquery动作进行序列你必须用这样的回调调用第二个动作

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

See This

淡出另一个元素后淡化元素并不真正起作用

2 个答案:

为什么会出现问题

解决方案

演示

进一步评论：