无法淡出数组中的特定元素

Question

我敢肯定这真的很简单，我只是不明白。但我正在尝试定位 jquery 选择器的第一个元素并淡出该元素。我可以淡化这两个元素，但不能使用索引单独淡化任何一个。我不断收到 "jQuery.Deferred exception: $(...)[0].fadeOut is not a function" 错误。我正在使用 codepen，因此 jquery 库和 SCSS 已加载到其中。

HTML

<div class="container">
  <img src="https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg" class="container__image">
  <img src="https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg" class="container__image">
</div>

CSS

* {
  margin:0;
  padding: 0;
  box-sizing: border-box;

}

.container {
  width: 350px;
  height: 350px;
  background-color: blue;
  margin: 15px auto;

  &__image {
    max-width: 100%;
    height: auto;
  } 
}

Javascript:

$(document).ready(function() {
  $(".container__image")[0].fadeOut();
});

Answer 1

你可以使用 eq .

 $(document).ready(function() {
   $(".container__image").eq(0).fadeOut();
 });

或者你可以这样使用array

$(document).ready(function() {
  var array = [];
  $('.container__image').each(function(i, li) {
    array.push($(li));
  });
  array[0].fadeOut();
});

无法淡出数组中的特定元素

Can't fadeOut specific element within array

javascript

jquery

animation

fadeout

jquery-animate