javascript - 淡入淡出多个元素

Question

我想制作照片库类型的效果，但我不想使用旋转木马 slider ，而是只想淡入和淡出。

到目前为止我尝试了什么:

// 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>

我想要发生的事情:

---- 首次运行 ----

--- 显示容器 ---

    <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 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>

希望这些信息足以让大家理解，如果您需要更多信息，请在下方评论。

Answer 1

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

用 CSS (display:none) 隐藏了一个 div，显然你必须给它一个唯一的标识符。

使用 jQuery，像这样切换两个 Div:

$('helloContainer').fadeToggle();