Fade-In and Out on Images/Screensaver with CSS & Jquery The 2019 Stack Overflow Developer Survey Results Are InHow do I check if an element is hidden in jQuery?Set cellpadding and cellspacing in CSS?Setting “checked” for a checkbox with jQuery?How do I give text or an image a transparent background using CSS?How to check whether a checkbox is checked in jQuery?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?“Thinking in AngularJS” if I have a jQuery background?Is it possible to apply CSS to half of a character?
Protecting Dualbooting Windows from dangerous code (like rm -rf)
Do these rules for Critical Successes and Critical Failures seem Fair?
Are there incongruent pythagorean triangles with the same perimeter and same area?
Is "plugging out" electronic devices an American expression?
Resizing object distorts it (Illustrator CC 2018)
Worn-tile Scrabble
Does a dangling wire really electrocute me if I'm standing in water?
How come people say “Would of”?
Deal with toxic manager when you can't quit
How to obtain Confidence Intervals for a LASSO regression?
Write faster on AT24C32
Why can Shazam fly?
Why didn't the Event Horizon Telescope team mention Sagittarius A*?
Right tool to dig six foot holes?
Loose spokes after only a few rides
How to support a colleague who finds meetings extremely tiring?
Can a flute soloist sit?
Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?
Origin of "cooter" meaning "vagina"
What does "fetching by region is not available for SAM files" means?
Are children permitted to help build the Beis Hamikdash?
Delete all lines which don't have n characters before delimiter
Is this app Icon Browser Safe/Legit?
Why isn't airport relocation done gradually?
Fade-In and Out on Images/Screensaver with CSS & Jquery
The 2019 Stack Overflow Developer Survey Results Are InHow do I check if an element is hidden in jQuery?Set cellpadding and cellspacing in CSS?Setting “checked” for a checkbox with jQuery?How do I give text or an image a transparent background using CSS?How to check whether a checkbox is checked in jQuery?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?“Thinking in AngularJS” if I have a jQuery background?Is it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I've got a screensaver/slideshow that I'm working on. Its meant to loop through the images and fade-in and out using CSS and I'm applying classes using JQuery to achieve that. But the problem I have is that I only constantly loads the first Image and doesn't load the 2nd or any consecutive images.
Here's the HTML and script:
$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>I've spent a couple of days trying to figure it out but unable to do so. Any help would be appreciated. I even thought of added ID to the images but the image links are served by the controller in Spring and displayed using Thymeleaf's for:each, so i dont have anything to provide ID except the link itself.
jquery html css
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
add a comment |
0
I've got a screensaver/slideshow that I'm working on. Its meant to loop through the images and fade-in and out using CSS and I'm applying classes using JQuery to achieve that. But the problem I have is that I only constantly loads the first Image and doesn't load the 2nd or any consecutive images.
Here's the HTML and script:
$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>I've spent a couple of days trying to figure it out but unable to do so. Any help would be appreciated. I even thought of added ID to the images but the image links are served by the controller in Spring and displayed using Thymeleaf's for:each, so i dont have anything to provide ID except the link itself.
jquery html css
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
1
You usedhide()on the second image, then never made it show again. Also, thefade-outclass was removed right after you added it. Here's a demo.
– Shikkediel
Mar 22 at 5:10
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
1
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55
add a comment |
0
0
0
I've got a screensaver/slideshow that I'm working on. Its meant to loop through the images and fade-in and out using CSS and I'm applying classes using JQuery to achieve that. But the problem I have is that I only constantly loads the first Image and doesn't load the 2nd or any consecutive images.
Here's the HTML and script:
$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>I've spent a couple of days trying to figure it out but unable to do so. Any help would be appreciated. I even thought of added ID to the images but the image links are served by the controller in Spring and displayed using Thymeleaf's for:each, so i dont have anything to provide ID except the link itself.
jquery html css
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
I've got a screensaver/slideshow that I'm working on. Its meant to loop through the images and fade-in and out using CSS and I'm applying classes using JQuery to achieve that. But the problem I have is that I only constantly loads the first Image and doesn't load the 2nd or any consecutive images.
Here's the HTML and script:
$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>I've spent a couple of days trying to figure it out but unable to do so. Any help would be appreciated. I even thought of added ID to the images but the image links are served by the controller in Spring and displayed using Thymeleaf's for:each, so i dont have anything to provide ID except the link itself.
$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>$(document).ready(function()
var imageTime =30000;
var autoSwitch = true;
var fadeSpeed = 500;
$(".touch-screensaver-container").first().addClass("fade-in");
$(".touch-screensaver-container").hide();
$(".fade-in").show();
if(autoSwitch == true)
setInterval(nextSlide,5000);
function nextSlide()
$('.fade-in').removeClass('fade-in').addClass('fade-out');
if($('.fade-out').is(':last-child'))
$('.touch-container').first().addClass('fade-in');
else
$('.fade-out').next().addClass('fade-in');
$('.fade-out').removeClass('fade-out');
);.fade-in
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
@keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeInOpacity
0% opacity: 0;
99% opacity: 0.99;
100% opacity: 1;
@-webkit-keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
@keyframes fadeOut
0% opacity: 1;
99% opacity: 0.01;width: 100%; height: 100%;
100% opacity: 0;width: 0; height: 0;
.fade-out
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav id="kiosk-navbar" class="kiosk-navbar" role="navigation">
<div class="kiosk-navbar-language-container">
<a id="languageSelector" class="btn touch-btn touch-btn-xs primary-btn animated" href="/">
<i class="fa fa-home fa-3x"></i>
</a>
</div>
<div class="kiosk-navbar-image-container">
<div class="kiosk-navbar-image"></div>
</div>
</nav>
<div id="content" class="container-parent kiosk-background">
<div class="main-content"><div class="screensaver-image-container ">
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=c231789d-3574-4d2d-8a07-a9c52c97dfd7.jpeg" src="https://images.unsplash.com/photo-1552974380-6df376868cda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
<div class="touch-container touch-screensaver-container">
<a class="homeLink" href="/public/selectLanguage"><img class="screensaverImage" id="https://localhost:443/api/public/resource/6f39ad92-5cdb-4ddf-a0f7-41d4d7edbb4b/fetch/image?file=71924af8-057f-41f8-a2e3-a9ce8017006a.jpeg" src="https://images.unsplash.com/photo-1541929347448-1a5788e6178a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></a>
</div>
</div>
</div>jquery html css
jquery html css
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
edited Mar 22 at 5:54
Xenio Gracias
1,7361512
1,7361512
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
asked Mar 22 at 3:31
bluebrigade23bluebrigade23
366
366
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
1
You usedhide()on the second image, then never made it show again. Also, thefade-outclass was removed right after you added it. Here's a demo.
– Shikkediel
Mar 22 at 5:10
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
1
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55
add a comment |
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
1
You usedhide()on the second image, then never made it show again. Also, thefade-outclass was removed right after you added it. Here's a demo.
– Shikkediel
Mar 22 at 5:10
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
1
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
1
1
You used
hide() on the second image, then never made it show again. Also, the fade-out class was removed right after you added it. Here's a demo.– Shikkediel
Mar 22 at 5:10
You used
hide() on the second image, then never made it show again. Also, the fade-out class was removed right after you added it. Here's a demo.– Shikkediel
Mar 22 at 5:10
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
1
1
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55292504%2ffade-in-and-out-on-images-screensaver-with-css-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55292504%2ffade-in-and-out-on-images-screensaver-with-css-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Wouldn't it be easier if you used one of the thousands of ready to use slideshow libraries/plugins/demos?
– Hubert Grzeskowiak
Mar 22 at 3:58
1
You used
hide()on the second image, then never made it show again. Also, thefade-outclass was removed right after you added it. Here's a demo.– Shikkediel
Mar 22 at 5:10
You could do the same with only a fraction of the code though.
– Shikkediel
Mar 22 at 5:53
@HubertGrzeskowiak I thought about it but we decided against using third party plugins/libraries.
– bluebrigade23
Mar 24 at 20:37
1
@Shikkediel that worked like a charm! Thank you :)
– bluebrigade23
Mar 24 at 20:55