javascript - jQuery - 使用 fadeOut 而不破坏元素

Question

所以我用 jQuery 制作了一个简单的“图库” View 。简而言之，我有一个在页面加载时从中间开始的图像，5 秒后，该图像转到左侧并淡出，而新图像转到右侧以在淡入时替换上一个图像。一旦上一个图像淡出后，它会放回到图像堆栈中。如果当前未使用该图像，我将不透明度设置为 0，使其不可见。当需要再次显示图像时，我将不透明度设置为 1，当然，将其淡入并将其设置为动画到正确的位置。我已经实现了其中的大部分内容，并使其发挥作用。但我遇到了一个问题。一旦我淡出图像，它就消失了。我不知道该元素是否已被破坏，或者它是否只是完全透明，但它已经消失了。我稍后需要重新使用该图像，所以这当然是一个问题。我已经看到其他网站做了我正在尝试的事情，所以这是可能的。

有没有办法淡出一个元素，然后再淡入淡出以供重复使用？

jQuery:

$(document).ready(function(){
     var images = $('ul.images li');
     var lastElem = images.length-1;
     var target;
     var hasMoved = false;

     images.first().addClass('selected');

     function slide(target) {
        //alert(hasMoved);
          for(var i = 0; i < images.length; i++) {
             if(target != 0) { 
                if(i != target && i != target-1) {
                    $(images[i]).css('opacity', '0');  
                } else {
                    $(images[i]).css('opacity', '1');
                }
             } else {
                 if(i != target && i != lastElem) {
                    $(images[i]).css('opacity', '0');  
                } else {
                    $(images[i]).css('opacity', '1'); 
                }
             }
          }

         $(images[target]).fadeIn({queue: false, duration: 2000});
         $(images[target]).animate({right:'300px'}, 2000);
           images.removeClass('selected').eq(target).addClass('selected');

         if(target != 0) {
             $(images[target--]).fadeOut({queue: false, duration: 2000});
             $(images[target--]).animate({left:'300px'}, 2000);
         } else {
             $(images[lastElem]).fadeOut({queue: false, duration: 2000});
             $(images[lastElem]).animate({left:'300px'}, 2000);
         }

         hasMoved = true;

     }

     function sliderTiming() {
       target = $('ul.images li.selected').index();
       target === lastElem ? target = 0 : target = target+1;
       slide(target);
     };

     if(hasMoved === false) {
         for(var i = 0; i < images.length; i++) {
              if(i === 0) {
                $(images[0]).css('opacity', '1');  
              } else {
                  $(images[i]).css('opacity', '0'); 
              }
          }
     }

    var timingRun = setInterval(function() { sliderTiming(); },5000);
    function resetTiming() {
        clearInterval(timingRun);
        timingRun = setInterval(function() { sliderTiming(); },5000);
    };
});

Answer 1

fadeOut 不会删除元素，但 fadeOut 会将 display 设置为 none 来删除元素一旦淡出，就会从流程中消失。

如果需要保持元素在流程中但不可见，可以使用fadeTo()

$(images[target--]).fadeTo(2000, 0)

或animate()，因为您已经在使用它

$(images[target--]).animate({left:'300px', opacity: 0}, 2000);