Fade in and out multiple elements

Question

I want to make a photo gallery type effect but instead of a carousel slider, I want to just fade in and out.

What I've tried so far:

 // To hide all but the first image when page load $('.homeBanners .helloContainer:gt(0)').hide(); $(".homeBanners").mouseenter(function() { clearTimeout($(this).data('homeBannerScrollTime')); }).mouseleave(function() { var homeBannerElement = $(this), homeBannerScrollTime = setInterval(function() { $('.homeBanners :first-child').fadeOut(500).next().fadeIn(500).end().appendTo('.homeBanners'); }, 1000); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over homeBannerElement.data('homeBannerScrollTime', homeBannerScrollTime); }); 

 .homeBanners { width: 2000px!important; height: 400px; position:relative; border: 1px solid red; padding: 5px; } .homeBanners img { width: 100%!important; height: 400px; position:absolute; top:0; left:0; } .hello { display: block; float: left; margin-left: 10px; background-color: blue; width: 200px; height: 200px; } .hello2 { background-color: red; width: 200px; height: 200px; } .hello3 { background-color: green; width: 200px; height: 200px; } .hello4 { background-color: purple; width: 200px; height: 200px; } .hello5 { background-color: grey; width: 200px; height: 200px; } .hello6 { background-color: aqua; width: 200px; height: 200px; } .homeBanners img:hover { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="homeBanners"> <div class="helloContainer"> <div class="hello"></div> <div class="hello hello2"></div> <div class="hello hello3"></div> </div> <div class="helloContainer"> <div class="hello hello4"></div> <div class="hello hello5"></div> <div class="hello hello6"></div> </div> </div> 

What I want to happen:

---- First Run ----

--- Shown container ---

    <div class="helloContainer">
        <div class="hello"></div>
        <div class="hello hello2"></div>
        <div class="hello hello3"></div>
    </div>

--- Hidden container ---

    <div class="helloContainer">
        <div class="hello hello4"></div>
        <div class="hello hello5"></div>
        <div class="hello hello6"></div>
    </div>

--- Fade in and out ---

--- Shown container (fade out) ---

    <div class="helloContainer">
        <div class="hello"></div>
        <div class="hello hello2"></div>
        <div class="hello hello3"></div>
    </div>

--- Hidden container (fade in) ---

    <div class="helloContainer">
        <div class="hello hello4"></div>
        <div class="hello hello5"></div>
        <div class="hello hello6"></div>
    </div>

Hope this is enough information for everyone to understand, If you need anymore information please just comment below.

Answer 1

http://api.jquery.com/fadetoggle/

Have one div hidden with CSS ( display:none ), you will have to give it a unique identifier, obviously.

using jQuery, toggle the two Divs like:

$('helloContainer').fadeToggle();