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,758
    Likes Received:
    4,519
    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