在 html 中对元素进行淡入和淡出"style"，使用 jQuery 或 javaScript

Question

我想做一些类似以下代码的事情(通过jQuery(：

$( "#ID_ELEMENT" ).style.backgroundColor="blue".fadeIn(100);
setTimeout(function(){ $( "#ID_ELEMENT" ).style.backgroundColor="blue".fadeOut(100); }, 3000);

谢谢。

Answer 1

的挑战

你帖子中的代码似乎是试图使用方法链接(请参阅此处和此处(来：

1. 选择ID属性为ID_ELEMENT的元素
2. 将该元素的background color属性更改为blue
3. 对更新的元素使用jQueryfadeIn效果

然后：

1. 等待3秒(3000ms(
2. 选择具有ID_ELEMENT的ID属性的元素
3. 将该元素的background-color属性更改为blue
4. 对更新的元素使用jQueryfadeOut效果

问题

当使用方法链接时，每个方法都返回一个对象，该对象可以由链中的下一个方法使用。您在整个代码中混合了香草JavaScript和jQuery：

• 不是所有普通JavaScript中的函数都返回值。如果一个方法没有返回下一个方法可以使用的值，则无法使用方法链接
• jQuery文档提供了有关函数的详细信息，以及有关返回对象(主要是jQuery集合(的信息。因为您混合了vanilla JavaScript和jQuery，所以您的代码将无法工作(见下文(

分解解决方案

(1(代码中的$( "#ID_ELEMENT" )选择器为ID_ELEMENT的ID元素创建一个jQuery集合对象。jQuery集合对象的创建使您能够将jQuery方法应用于选定的元素。

(2(在纯JavaScript中，您可以在页面中选择HTML元素(例如document.getElementById( "ID_ELEMENT" )(。然后，此选择提供对该元素的方法和属性的访问。例如，.style.backgroundColor="blue"就是这样一种方法，允许元素的背景颜色更新为蓝色。

可用于JavaScriptDOM元素的方法与可用于jQuery集合元素的方法不同，并且这两个元素不能互换。有关可用JavaScript方法的更多信息，请访问MDN。关于jQuery方法的更多信息可以在jQuery网站上找到。

JQuery包含.css()方法，该方法允许您执行与.style.backgroundColor相同的操作。使用等价的jQuery意味着已经返回了一个jQuery集合对象，准备由链中的下一个方法使用。

(3(因为前面的方法返回了一个jQuery集合对象，所以现在可以对返回的对象使用另一个jQuery方法。

您可以重复上面的步骤来创建第二个方法链。注意，在代码的第一阶段中，background-color属性已经设置为blue。除非您将在其他地方更改此属性，否则此操作可能是多余的。

给出结果

$( "#ID_ELEMENT" ) // grab el in jQuery
.css( "backgroundColor", "blue" ) // change  CSS background colour prop to blue
.fadeIn(1000);  // fade element in

// do something in 3s time...
setTimeout(function(){ 
$( "#ID_ELEMENT" )
.css( "backgroundColor", "blue" ) // change CSS background to blue
.fadeOut(1000);  // fade element out
}, 3000);

/* Optional - added sizing make demo more obvious */
div{
width: 500px;
height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ID_ELEMENT"></div>