Vyblednutie medzi obrázkami - jquery, fadein, fadeout

Ako môžem vyblednúť striedanie medzi dvomi obrázkami pomocou jQuery? Povedzme napríklad.

<img src="/images/image01.jpg" />
<img src="/images/image02.jpg" />

Páči sa mi, že obrazy sa vytratia medzi dvomi sekundami.

Vďaka! Veľmi si to cením. :)

odpovede:

6 pre odpoveď č. 1

Jednoduchý príklad som zrazil.

<div id="imageSwap">
</div>


<script language="javascript" type="text/javascript">

$(document).ready(function () {
setImageOne();
});

function setImageOne() {
$("#imageSwap").fadeIn(500).html("<img src="/images/image01.jpg" />").delay(2000).fadeOut(500, function () { setImageTwo(); });
}

function setImageTwo() {
$("#imageSwap").fadeIn(500).html("<img src="/images/image02.jpg" />").delay(2000).fadeOut(500, function () { setImageOne(); });
}

</script>

2 pre odpoveď č. 2

prepísať html na

<div>
<img class="current slide" src="/images/image01.jpg" style="position:absolute;"/>
<img class="slide" src="/images/image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="/images/image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="/images/image01.jpg" style="visibility:none;"/>
</div>

Pridal som tretí obrázok pre jasnosť. Pridajte funkciu jquery ako

function nextSlide() {
jQuery(".slide.current").each(function() {
var next = jQuery(this).next(".slide");
if (!next.size()) next = jQuery(this).siblings(".slide").eq(0);
jQuery(this).fadeOut().removeClass("current");
next.fadeIn().addClass("current");
});
slidetimer=setTimeout("nextSlide()",slidespeed);
}

Vo vašej základni javascript, pridajte

var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
nextSlide()
});

Netestoval som to presne tak, tak to bol typmôže byť tam. Okolo div zabezpečuje, že všetky snímky snímky sú umiestnené na mieste, kde je div umiestnený, z dôvodu ich polohy: absolútne. fiktívny obraz nie je viditeľný, ale zaplní priestor potrebný na to, aby okolitá div skutočne zabalil všetky obrázky. Možno to nebudete potrebovať.

Vaše obrázky by mali mať podobné veľkosti, alebo aspoň figurína by mala byť taká veľká ako najväčší obrázok.

$ 2c, * -pike


0 pre odpoveď č. 3

Hľadal som spôsob, ako medzi webkamerou miznúťbez toho, aby bol medzi zobrazenými obrázkami. Čo robím, je nastavenie nového obrázka ako obrázok na pozadí, vyblednutie priloženého obrázka, nastavenie obrazu na pozadí ako priloženého obrázka a potom opätovné zobrazenie priloženého obrázka.

Môžete niečo urobiť

Prišiel som s tým.

<style type="text/css">
#webcamImageDiv {
text-align: center;
background-image: url("webcam.jpg");
background-position: top center;
background-repeat: no-repeat;
}
</style>

<div id="webcamImageDiv">
<img id="webcamImageImg" src="/images/webcam.jpg" alt="Image Not Available" />
</div>

<script type="text/javascript">

var refreshMillis = 10000;

function refreshWebcam() {

// set the div to the height of the image
$("#webcamImageDiv").height( $("#webcamImageImg").height() );

// get the path to the new image
// (in your case, your other image)
var newImg = "webcam.jpg?t=" + new Date().getTime();

// set the background of the div
$("#webcamImageDiv").css("background-image","url("" + newImg + "")");

// fade out the image
$("#webcamImageImg").fadeOut(500, function() {

// update the img tag, show the image
$("#webcamImageImg").removeAttr("src").attr("src", newImg).show();

// do it again
window.setTimeout(getWebcam, refreshMillis);
});
}

$(document).ready( function() {
window.setTimeout(refreshWebcam, refreshMillis);
});
</script>

0 pre odpoveď č. 4

Môžete to urobiť bez jquery. Len s css: A pohode medzi jednotlivými obrázkami

.fade img {
transition: all .8s;
max-width: 200px;
}
.fade:hover img:nth-child(2) {
opacity: 0;
}
.fade img:first-child {
position: absolute;
z-index: -1;
}
<div class="fade">
<img src="/images/https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
<img src="/images/https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg">
</div>


-1 pre odpoveď č. 5

Lepšia kontrola načasovania pomocou .animate a .css namiesto toho

Tým sa vytvorí navijak mäkký kríž.

V každom cykle presunie neviditeľný obraz vpred, než začne opacitu animácie na hodnotu 100. Po vykonaní predchádzajúceho viditeľného obrázka je potom nastavená na opacitu 0 a presunúť sa dopredu atď.

<div>
<div id="imageSwapA"  style="display:block; z-index:100; opacity:0;">
<img src="/images/imagea.png"/>
</div>
<div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
<img src="/images/imagea.png"/>
</div>
</div>

<script>
$(document).ready(function () {

setRollOne(); // <- animation can be triggered

function setRollOne() {
$("#imageSwapA").css({"z-index":101}).animate({"opacity":1}, 3500, function(){
$("#imageSwapB").css({"opacity":0});
$("#imageSwapA").css({"z-index":100});
setTimeout(function(){ setRollTwo(); }, 1500);
});
}
function setRollTwo() {
$("#imageSwapB").css({"z-index":101}).animate({"opacity":1}, 3500, function(){
$("#imageSwapA").css({"opacity":0});
$("#imageSwapB").css({"z-index":100});
setTimeout(function(){ setRollOne(); }, 1500);
});
}
});
</script>

Ponuka