What could be causing my cross fade to not repeat as intended?

I created a basic background image cross fader using the code found at http://jsfiddle.net/jRDkm/2/. This code was inspired by .

However, I'm encountering an issue where the slideshow only repeats once before fading to white. How can I modify the code to make it continuously repeat?

Here is the JS code:

function slideshow() {
$('#fullscreen-slider li:gt(0)').hide();
setInterval(function(){
    $('#fullscreen-slider :first-child').fadeOut()
    .next('li').fadeIn()
    .end().appendTo('#fullscreen-slider');
}, 3000);
};

Answer №1

Your current selector is not accurate. Please attempt the following:

$('#fullscreen-slider li:first').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');

To see a demonstration, visit: http://jsfiddle.net/jRDkm/5/

Answer №2

CHECK OUT LIVE DEMO

/* Code snippet from plugins.js */
function adjustElements() {
    $('ul#fullscreen-slider li').height( $(window).height() ).width( $(window).width() );
}

function startSlideshow() {
    var index = 0;
    var $slides =  $('#fullscreen-slider li');
    $slides.hide().eq(index).show();
    setInterval(function(){
        $slides.eq(index++ % $slides.length).fadeTo(600,1).siblings().fadeTo(600,0);
    }, 3000);
}

$(document).ready(function() {
    adjustElements();
    startSlideshow();
});

Answer №3

Check out this code snippet: http://jsfiddle.net/jRDkm/4/

function slideshow() {
    $('#fullscreen-slider li:gt(0)').hide();
    setInterval(function(){
        $('#fullscreen-slider li:eq(0)').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');
    }, 3000);
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

SimpleModal Jquery experiencing intermittent flashing in Firefox

While utilizing the SimpleModal plugin for jQuery, I've encountered an unusual issue specific to Firefox (other browsers such as Chrome, Safari, Opera, and IE are working perfectly). The problem arises when I click on the button that triggers the mod ...

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, ren ...

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

Having trouble with Autocomplete Search feature in Laravel?

I have a search field with the same name and id on both my categories page and products page. The autocomplete suggestions are working fine, but when I click on a suggested product in the search field, it stays on the same page instead of redirecting me to ...

Switching the root directory for the Next.js application caused a meltdown on the production server, while the development server and local build remained unaffected

TL;DR I modified my base path from "/" to "custom-subpath" and encountered CSS missing on the production server despite it working well on my local server. Please forgive me, as explaining this issue may be challenging due to my limite ...

Conceal the div element if the screen size drops below a certain threshold

Is it possible to hide a div element when the browser width is less than or equal to 1026px using CSS, like this: @media only screen and (min-width: 1140px) {}? If not, what are some alternative solutions? Additional information: When hiding the div eleme ...

"Trouble with image height not scaling correctly in Internet Explorer when using the img tag

I am facing an issue that can be observed by visiting this link using Internet Explorer. Interestingly, everything functions perfectly in all other browsers (although Chrome displays little blue squares next to the images for some unknown reason). Here i ...

Looking for a way to verify usernames using Jquery and ajax?

I just finished writing this ajax request to check usernames... function check_username() { var username = $("#username").val(); $('.loading').fadeIn().delay(100); $.post("ajax.php", { username: $('#username').val() ...

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

Why won't the items budge from the expandable box?

I am facing an issue with dragging and dropping elements between two divs, where one is resizable. My goal is to be able to drag items back and forth between the two divs seamlessly. $(".item").draggable({ helper: 'clone' }); $( ".container" ). ...

Interactive search tool for toggling visibility of elements

Hello everyone, this is my initial post on StackOverflow. Keeping my fingers crossed that it goes smoothly! <input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></scr ...

What is the interaction between Handlebars.js, jQuery, and Nodejs Express?

Currently, I am in the process of building a simple website using Express JS and Handlebars. The two main files involved are page1Router.js and page1Router.handlebars. Within the Handlebars file, you will find the following code snippet: <!DOCTYPE html ...

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

Having a problem with the hover effect on the navbar component

Whenever I hover over the individual links, I notice that the color change doesn't extend all the way up. I have a feeling there is a more efficient way to achieve this than my current approach. Any assistance would be greatly appreciated! HTML: < ...

Is it possible for the Chrome mobile camera to take up the full screen size on

Currently, I am using the code below to access the camera and display the stream. The width of the element is 100%, but the height seems to be around 70%. Is there a better way to make it fill the entire screen? HTML <video autoplay class="screen"> ...

Preventing Repetition in an HTML List using JavaScript

My HTML list is populated with values from JSON, and I have a button on the page. <button onclick="printJsonList()">CLICK</button> This button triggers the following JavaScript function: function printJsonList(){ console.log(ctNameKeep); ...

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

This is a piece of HTML code that utilizes bootstrap 3 for design purposes. The challenge faced is related to positioning text over an image. When resizing the browser, the alignment of the text with the background gets disturbed. Assistance is needed in r ...