CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YaBCK
YaBCK

Reputation: 3029

Fade in and out multiple elements

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.

Upvotes: 0

Views: 359

Answers (1)

Josh Stevenson
Josh Stevenson

Reputation: 905

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();

Upvotes: 1

Related Questions