jQuery-使用fadeOut而不破坏元素

Question

所以我正在用jQuery做一个简单的“图库”视图。 简而言之，我有一张图像从页面加载的中间开始，在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元素， fadeOut会将display设置为none以将其从流中删除。

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

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

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

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