使用jQuery或javaScript的html中元素的fadeIn和fadeOut“样式”

2020-03-26 javascript jquery

我想做类似下面的代码(通过jQuery):

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

谢谢。

Answers

挑战

您帖子中的代码似乎是试图将方法链接(请参见此处此处 )用于:

  1. 选择ID属性为ID_ELEMENT的元素
  2. 将该元素的background color属性更改为blue
  3. 在更新后的元素上使用jQuery fadeIn效果

接着:

  1. 等待3秒(3000毫秒)
  2. 选择ID属性为ID_ELEMENT的元素
  3. 将该元素的background-color属性更改为blue
  4. 在更新后的元素上使用jQuery fadeOut效果

问题所在

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

  • 并非普通JavaScript中的所有函数都返回值。如果某个方法未返回下一个方法可以使用的值,则无法使用方法链接。
  • jQuery文档提供有关功能的详细信息,以及有关返回的对象(主要是jQuery集合)的信息。 因为您已经混合了原始JavaScript和jQuery,所以您的代码将无法工作(请参见下文)。

打破解决方案

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

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

JavaScript DOM元素可用的方法与jQuery集合元素可用的方法不同,并且这两个元素不可互换。可在MDN上找到有关可用JavaScript方法的更多信息。可以在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>

Related