Witam napisałem dziś galerie ze zdjęciami i zastanawiam się jak dodać Efekt FadeIn i Fade Out dla całego obiektu przy włączaniu i wyłączaniu jak i przy zmianie zdjęć
var zdjencie = 0; function wlacz(nrzdj) { zdjencie = nrzdj; if (zdjencie>5) zdjencie=1; else if (zdjencie<1) zdjencie=5; document.getElementById("galeria").innerHTML = '<div id="gallery"><span onclick="wylacz()">X</span><div id="MainGallery"></div><div id="pointers"><i class="icon-angle-left" onclick="wlacz(zdjencie-1)"></i><i class="icon-angle-right" onclick="wlacz(zdjencie+1)"></i></div></div>'; var plik = '<img src="Graphics/Wallpapers/Wallpaper' + zdjencie + '.png" />'; document.getElementById("MainGallery").innerHTML = plik; $("#MainGallery").fadeIn(500); } function wylacz() { document.getElementById("galeria").innerHTML = ''; }
#gallery{ width: 100%; height: 100%; background-image: url("../Graphics/Gallery.png"); z-index: 75; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; } #gallery span{ font-size: 50px; margin-left: 98%; transition-duration: 1s; } #gallery span:hover{ cursor: pointer; color: #00B0FF; transition-duration: 2s; } #MainGallery { background-color: #FFF; width: 1000px; padding: 20px; padding-bottom: 50px; border: 3px solid black; margin: auto; border-radius: 5px; } #MainGallery img{ height: 563px; width: 1000px; opacity: 1; } #pointers{ z-index: 100; color: #000000; position: fixed; font-size: 50px; width: 1000px; left: 50%; top: 40%; transform: translate(-50%, -50%); } #pointers i:first-child{ margin-right: 86%; } #pointers i{ padding-bottom: 250px; padding-top: 250px; opacity: 0.2; transition-duration: 0.5s; } #pointers i:hover{ cursor: pointer; color: #00B0FF; opacity: 1; transition-duration:1s; }