如何在JS中淡出圖像？

我想用fadeIn和fadeOut方法創建一個使用JS的幻燈片。問題是下一張圖像會淡入，但前一張圖像不會淡出。如何在JS中淡出圖像？

我想切換位置風格的JS代碼，以便當網站加載容器將接受裏面的內容，並會相應地放大。

我創建了一個功能來切換位置的風格。

這是我到目前爲止有：

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function toggle() { 
 
    document.getElementById("img").style.position = "absolute"; 
 
    } 
 

 
    setInterval(function() { 
 
    $('#slideshow > div:first') 
 
     .toggle() 
 
     .fadeOut(1500) 
 
     .next() 
 
     .fadeIn(1500) 
 
     .end() 
 
     .appendTo('#slideshow'); 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
 

 
<div id="slideshow"> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

我只是不知道如何讓圖像褪色，在未來一個之前淡出

感謝。 in advanced

來源

2016-07-21 Elden Theaker

首先（一種無形的元素），它不是確定有幾個要素具有相同的ID。

其次，爲了有淡入淡出效果，必須在彼此的頂部位置的圖像，並去除肘（）函數：https://jsfiddle.net/0rxqbuu5/

那是你瞄準什麼？

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function myToggle() { 
 
    $(".center-img").css("position","absolute"); 
 
    } 
 

 
    setInterval(function() { 
 
$('#slideshow > div:first') 
 
    .fadeOut(1500,function(){myToggle()}) 
 
    .next() 
 
    .css("z-index",100) 
 
    .fadeIn(1500) 
 
    .end() 
 
    .appendTo('#slideshow'); 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.slideshow_div { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div class="slideshow_div"> <img class="center-img" src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg"> </div> 
 
    <div class="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

來源

2016-07-21 11:40:02 evilpenguin

爲什麼要切換位置CSS元素的原因是，圖像與瀏覽器正確縮放，容器將重新構建圖像。 –

請參閱更新的答案。如果您使用jQuery，則不需要使用getElementById – evilpenguin

<html> <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".btn1").click(function(){ 
     $("p").fadeOut() 
    }); 
    $(".btn2").click(function(){ 
     $("p").fadeIn(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>This is a paragraph.</p> 

<button class="btn1">Fade out</button> 
<button class="btn2">Fade in</button> 

</body> 
</html>

set image at DIV這樣你就可以淡入出它

來源

2016-07-21 11:23:28

這不回答我的問題。 –

只是刪除切換並做淡出回調函數內的下一個東西：

下面是解

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function toggle() { 
 
    document.getElementById("img").style.position = "absolute"; 
 
    } 
 

 
    setInterval(function() { 
 
    $('#slideshow > div:first') 
 
     .fadeOut(1500,function() { 
 
      // Animation complete. 
 
      $(this).next().fadeIn(1500) 
 
      .end() 
 
      .appendTo('#slideshow'); 
 
     }) 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
 

 
<div id="slideshow"> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

來源

2016-07-21 11:26:18

偉大的只是我在找什麼。只要添加，就可以同時淡入淡出。 –

請參閱我的回答，請 – evilpenguin

前一不會淡出

在你的代碼：

$('#slideshow > div:first') 
    .toggle() 
    .fadeOut(1500)

綜觀文檔 - http://api.jquery.com/toggle/ - 你是隱藏它，然後才fadeOut

來源

2016-07-21 11:27:40

哦，我沒有意識到.toggle（）是一種方法，那麼我將如何調用該函數呢？只用一個不同的名字？ –

我認爲** bRIMOs博爾** - 你有覆蓋*只需刪除切換，並執行下一個內部淡出回調函數* - 祝你好運！ –

如何在JS中淡出圖像？

回答

相關問題