为什么在jQuery中使用多个方法相邻而不工作?

Question

我是jQuery新手，遇到了一个问题。当我想使用多个方法彼此相邻的代码将无法工作。下面是代码:

$("document").ready(function() {
$("#button1").click(function() {
$("#home").fadeTo(1000, 0.5).delay(1800).fadeIn(500);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="img.png" alt="list image" id="menu">
<br/>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="contact"><a href="#">Contact</a></li>
<li id="about"><a href="#">About</a></li>
</ul>
</nav>
<br/>
<button id="button1">Button1</button>

我已经将延迟从800更改为1800，因为我认为延迟将在点击时开始。也因为.fadeTo的速度是1000毫秒。但不幸的是，它没有起作用。之后我重写了代码。

$("document").ready(function(){
$("#button1").click(function(){
$("#home").fadeTo(1000,0.5,function(){
$(this).delay(800).fadeIn(1000,1.0);
});
});
});

这个也不起作用。最后我把.fadeIn换成了.fadeTo。那工作!所以现在，因为这个，我有几个问题我不能回答。

1. 为什么$("#home").fadeTo(1000,0.5).delay(1800).fadeIn(500);不工作?
2. 为什么.fadeIn起作用而.fadeTo不起作用?

Answer 1

问题与链接无关，正如您在使用补全函数时所发现的那样。

我认为问题是，fadeIn()不做任何事情，如果元素不隐藏;如果元素具有部分不透明度，则会产生效果。将其更改为fadeTo(500, 1.0)，它可以工作。

据我所知，这在文档中没有明确说明。我不确定这是否应该被视为fadeIn()中的错误或文档错误。

$("document").ready(function() {
$("#button1").click(function() {
$("#home").fadeTo(1000, 0.5).delay(1800).fadeTo(500, 1.0);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="img.png" alt="list image" id="menu">
<br/>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="contact"><a href="#">Contact</a></li>
<li id="about"><a href="#">About</a></li>
</ul>
</nav>
<br/>
<button id="button1">Button1</button>