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会将display设置为none，以便在流消失后从流中删除该元素。

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

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

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

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

jQuery - 使用fadeOut而不破坏元素

1 个答案: