jQuery - 在不摧毁元素的情况下使用fadeOut

所以我使用jQuery制作了一个简单的“图库”视图。简单地说，我有一个图像，在页面加载时从中间开始，5秒后，图像向左移动并淡出，而新图像向右移动以在淡入时替换先前图像。一旦前一图像被淡出，它会被放回到图像堆栈。如果图像当前未被使用，我将不透明度设置为0，因此不可见。当图像再次显示的时候，我将不透明度设置为1，当然，淡入并将其设置为正确的位置。我已经实现了大部分，并使其工作。但我遇到了一个问题。一旦我淡出图像，它就消失了。我不知道该元素是否被销毁，或者它是否完全透明，但它已经消失。我以后需要重新使用这个图像，所以这当然是一个问题。我见过其他网站正在做我正在尝试的，所以这是可能的。jQuery - 在不摧毁元素的情况下使用fadeOut

有没有办法淡化一个元素，然后淡化它回来重用？

的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); 
    }; 
});

来源

2014-06-06 user2082169

.fadeIn（）撤消.fadeOut（） – dandavis

嗯...那么为什么我的图像会在第一次后停止淡入？也许它是我的代码的问题。 – user2082169

您还可以手动设置一些视觉属性，如不透明度，该fadeIn可能不会重置。 – dandavis

fadeOut不会删除元素，但fadeOut将设置display到none一旦它的淡出，从流删除元素。

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

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

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

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

来源

2014-06-06 20:56:53 adeneo

谢谢。这应该工作。 – user2082169

jQuery - 在不摧毁元素的情况下使用fadeOut

回答

相关问题