What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this would be greatly appreciated.

Here is an example of my HTML code structure: 

<h1 class="advert"> Sponsored Links </h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div class "ADVERTCONT"-->

(Repeat above block for each element of class 'advertcont')

</div><!--end of div class "CONTAINER"-->
javascriptjqueryhtmlcss

Answer №1

To display multiple divs with a counter incrementing in a function and utilizing setTimeout for continuous calling, you can initialize a counter set to 0 and then increment it within the function. The function will show the div elements by fading them in sequentially.

var ctr = 0; 

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

function showElem() {
  var length = $('.advertcont').length;
  $('.advertcont').hide();
  $('.advertcont').eq(ctr).fadeIn(900);
  (ctr >= (length-1)) ? ctr = 0: ctr++;   
  setTimeout(showElem, 1000);   //make it 15000. Have used 1000 for the demo
}
.advertcont {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div class "ADVERTCONT"-->
...
... Additional advertisement divs follow ...
...

</div><!--end of div class "CONTAINER"-->

Answer №2

Check out this easy fix below

setInterval(function(){ 
    jQuery('.advertcont:visible:eq(0)').fadeOut();
}, 15000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links </h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->

</div><!--end of div clas "CONTAINER"-->

Answer №3

Include some CSS styling.

.advertcont{
    display:none;
}

Next, add the following HTML code:

<h1 class="advert"> Sponsored Links </h1>
        <div class="advertcont">
            <img src="http://placehold.it/350x150" class="advertimg">
            <p class="adverttext">Get the Best Shoes at 30GHS.</p>
            <a class="advertlink" href="#">www.shoes.com</a>

        </div>
        <!--end of div class "ADVERTCONT"-->
        (repeat the above 'div' content as needed)
    </div>
    <!--end of div class "CONTAINER"-->

Then, implement the following jQuery script:

$(function() {
            $(".advertcont").each(function(index, element) {
                setTimeout(function() {
                    // fade previous element if any existed
                    if ($(element).prev().hasClass('advertcont')) {
                        $(element).prev().fadeOut(1000, function() {
                            $(element).show(1000);
                        });
                    } else {
                        $(element).show(1000);
                    }
                    // set timer to index (current iteration of the loop (current element)) * 15 seconds:
                }, index * 15000);

            });
        });

You can view and interact with this code on https://jsfiddle.net/njueukavi/3exn83ct/

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

Mastering the art of maximizing efficiency with the Jquery Chosen Plugin

Currently, I'm facing an issue with the jQuery chosen plugin due to my large datasets causing the select box to hang and slow down. Below is my implementation of the plugin: var request = $.ajax({ method: "POST", url: "ajaxRequest.php", d ...

javascriptjqueryajax

What is the reason for the consistency in the effects of vertical align: text bottom and vertical align: bottom?

The baseline positioning of a line box is impacted by all elements within that line. .short-box { width: 30px; height: 30px; background-color: pink; display: inline-block; } .box { background-color: ...

htmlcss

Arranging numerous items based on date in JavaScript without prior knowledge

I'm facing an issue where I need to showcase JSON data containing events but want them sorted by time. The challenge is that the number of objects in the JSON can vary as users can keep adding more. Below is my code snippet demonstrating how the displ ...

javascriptarrayssortingweb-frontend

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

Seeking assistance with ORGANIZING! Utilizing Jquery to loop through elements, assign distinct classes, and map through

I have a functional code, but it's not very concise and there is quite a bit of repetition. I am seeking assistance from someone with more expertise to help me streamline the code and improve my learning process. Initially, I had this output on my pa ...

jqueryloopsdrycode-cleanup

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

javahtmlseleniumxpathselenium-webdriver

unable to access POST information

I have encountered an issue with getting a basic AJAX POST to function properly. After facing difficulties with using a jQuery .click, I switched to an onclick method. I am unsure if I am making a glaring mistake or if there could be an issue with Apache s ...

javascriptphpjqueryajax

What are the drawbacks of using JavaScript to load a series of images?

Currently, I am facing an issue with the loading speed of a sequence of images on my website. The javascript code I have implemented to cycle through 50 images works perfectly fine locally but becomes slow and buggy when the site is live. Despite the image ...

javascripthtmlsequencecycle

Save the session ID in localStorage instead of a cookie

After successfully logging into my PhoneGap app, everything functions properly. I can send requests within the current session and am authenticated. However, if I completely close the app and reopen it, my session is lost. The cookie containing connect.sid ...

htmlnode.jsexpresscordovanode.js-connect

When incorporating Request.js and Cheerio.js into Node/Express, an unexpected outcome may occur where an empty

I am currently in the process of creating a basic web scraper using Request.js and Cheerio.js within Express. My main goal at the moment is to extract the titles of various websites. Instead of scraping each website individually, I have compiled them int ...

javascriptnode.jsexpressasynchronouscheerio

"Exploring the power of NodeJS with createServer, dealing with

Can instances of global.request potentially collide in this NodeJS scenario? I have a basic web server set up in NodeJS where I am globally exposing the request that is created: http.createServer(function(req, res) { global.request = req; // do ...

javascriptnode.js

Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong. * { box-sizing: border-box; margin: 0; padding: 0; } .container { ...

htmlcsslayoutfrontendgrid

Is it possible to modify the contents within the JSP div tag without replacing them through an AJAX call?

In my JSP, I face a scenario where there is a div tag with scriptlet content that pulls data from the database every time a request is received from the server. Previously, I was refreshing the entire page with each update, which not only loaded all the re ...

javascriptjqueryajaxjspscriptlet

What is the recommended data type to assign to the `CardElement` when using the `@stripe/react-stripe-js` package in TypeScript?

I'm struggling to determine the correct type to use for this import: import { CardElement } from '@stripe/react-stripe-js'; I have successfully used the types Stripe, StripeElements, and CreateTokenCardData for the stripe and elements props ...

javascripttypescriptstripe-payments

A guide to iterating over an array and displaying individual elements in Vue

In my application, there is a small form where users can add a date with multiple start and end times which are then stored in an array. This process can be repeated as many times as needed. Here is how the array structure looks: datesFinal: {meetingName: ...

javascripttypescriptvue.jsvuetify.js

Is there a way to enable a clickable imagemap area using jQuery?

Example showcasing different behaviors in various browsers (jsfiddle link): <!DOCTYPE html> <html> <head> <title>Browser Behavior Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

jqueryhtmlcssimagemap

The DiscordBot is configured to send a personalized direct message to users who have chosen a specific role

Having trouble setting up my bot to send a DM to new members who choose the Advertising role, and I can't figure out why. I'm fairly new to this. const { Client, GatewayIntentBits } = require('discord.js'); const client = new Client({ ...

javascriptnode.jsdiscord.js

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

c#htmlasp.net-mvcrazorhtml-helper

Retrieving a targeted data point from a JSON object

I am working with a json data that contains various properties, but I am only interested in extracting the uniqueIDs. Is there a way to retrieve ONLY the uniqueID values and have them returned to me as a comma separated list, for example: 11111, 22222? (I ...

javascriptjqueryarraysjson