淡入淡出多个元素

Question

我想制作照片库类型的效果，但我想要淡入淡出而不是旋转木马滑块。

到目前为止我尝试过的事情：

＆＃13;

＆＃13;

// 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);
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想要发生什么：

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

---显示的容器---

    <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隐藏一个div（display:none），显然你必须给它一个唯一的标识符。

使用jQuery，切换两个Div，如：

$('helloContainer').fadeToggle();