淡入和淡出多个元素

Question

我想制作一个照相馆类型的效果，但我想淡入淡出而不是旋转木马滑块。

到目前为止，我已经尝试过：

 // 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中隐藏一个div（ display:none ），显然，您将不得不为其赋予唯一标识符。

使用jQuery，切换两个Divs，例如：

$('helloContainer').fadeToggle();