淡入和淡出多個元素

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