1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Jquery FadeIn new background image

Discussion in 'jQuery' started by neodjandre, Sep 28, 2022.

0
  1. #1
    My theme uses this hardcoded code:

    <div class="x-bg-layer-lower-image" style=" background-image: url(https://www.example.com/home1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>
    HTML:
    I am looking to fadeout the background image as defined above and fadein a new image after 5 seconds. This loop should repeat every 5 seconds with additional images. Is this possible using Jquery?
     
    Last edited by a moderator: Sep 28, 2022
    neodjandre, Sep 28, 2022 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,641
    Likes Received:
    4,486
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Adapt this for the timing sequence
    <button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>
    Code (JavaScript):
    and this for the fade in - so that it's not triggered by a button but by the timeout callback
        <button id="fade-in">Fade In</button>      
    <button id="fade-out">Fade Out</button>       
    <button id="toggle-fading">Toggle Fading</button>
    <img src="logo.png" alt="logo">
   
    <script>
        $('#fade-in').click(function(){
            $('img').fadeIn('fast');
        });
        $('#fade-out').click(function(){
            $('img').fadeOut(400);
        });
    </script>
    </body>
</html>
    Code (JavaScript):
     
    sarahk, Sep 28, 2022 IP