按鈕單擊時，DIV淡出，而另一個DIV在同一位置淡入

Question

我有一個功能齊全的圖像滑塊，位於無序列表（3）DIVS旁邊。滑塊的第一個顏色與第一個DIV相對應。我試圖創建一個效果，當有人點擊滑塊上的「下一個」按鈕時，不僅滑塊會轉換到下一個顏色，但其旁邊浮動的DIV將淡出，而下一個DIV到下一個顏色淡入。

我有滑塊工作，但我有困難搞清楚如何讓每個點擊按鈕也連續循環通過每個DIV對應於滑塊的​​顏色。

我是一個相對的jQuery初學者，但我可以理解它的一些更復雜的邏輯，我只是​​無法弄清楚。我試圖讓DIV的溢出隱藏起來，並遵循相同的圖像滑塊過程，但沒有運氣。

我非常感謝任何幫助。以下是我迄今爲止所做的一切。

<ul id="slide_info"> 
    <div id="info1"> 
     <h2>Blue Header</h2> 
     <p>Description</p> 
    </div> 

    <div id="info2"> 
     <h2>Red Header</h2> 
     <p>Description</p> 
    </div> 

    <div id="info3"> 
     <h2>Yellow Header</h2> 
     <p>Description</p> 
    </div> 


</ul> 

https://jsfiddle.net/lgwj/Lb6p87ft/1/

Answer 1

這。您可以根據您的要求調整div的高度和寬度。

jQuery(document).ready(function ($) { 
 
    
 
\t var slideCount = $('#slider ul li').length; 
 
\t var slideWidth = $('#slider ul li').width(); 
 
\t var slideHeight = $('#slider ul li').height(); 
 
\t var sliderUlWidth = slideCount * slideWidth; 
 
\t 
 
\t $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
\t $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
    $('#slider ul li:last-child').prependTo('#slider ul'); 
 

 
    var slideinfoWidth = $('.desc').width(); 
 
    var slideinfoHeight = $('.desc').height(); 
 
    var sliderUlinfoWidth = slideCount * slideWidth; 
 
    
 
     $('#slide_info').css({ width: slideinfoWidth, height: slideinfoHeight }); 
 
    $('#info').css({ width: sliderUlinfoWidth}); 
 

 
    function moveRight() { 
 
     $('#slider ul').animate({ 
 
      left: - slideWidth 
 
     }, 300, function() { 
 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
 
      $('#slider ul').css('left', ''); 
 
     }); 
 
     $('#info').animate({ 
 
      left: - slideinfoWidth 
 
     }, 300, function() { 
 
      $('.desc:first-child').appendTo('#info'); 
 
      $('#info').css('left', ''); 
 
     }); 
 
    }; 
 
\t 
 
    $('a.control_next').click(function() { 
 
     moveRight(); 
 
    }); 
 

 
});

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    float:right; 
 
    width: 50% !important; 
 
} 
 

 
#slider ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 550px; 
 
    list-style: none; 
 
} 
 

 
#slider ul li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 639.5px; 
 
    height: 550px; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_next { 
 
    position: absolute; 
 
    top: 45%; 
 
    z-index: 999; 
 
    display: block; 
 
    padding: 50px 50px; 
 
    width: auto; 
 
    height: auto; 
 
    background-color: #fff; 
 
    color: #000; 
 
    text-decoration: none; 
 
    opacity: 0.5; 
 
    background-image:url(prev-icon.png); 
 
    background-repeat:no-repeat; 
 
} 
 

 
a.control_prev:hover, a.control_next:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

 

 
a.control_next { 
 
    right: 0; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 160px; 
 
    font-size: 18px;} 
 
    
 
    
 
    
 
#feat { 
 
    \t width: 100%;} 
 
    
 
    
 
.feat_slides { 
 
\t background-position: center top; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat;} 
 
\t 
 
#feat_slide1 { 
 
\t background: #006699;} 
 
\t 
 
#feat_slide2 { 
 
\t background: #CC0033;} 
 
\t 
 
#feat_slide3 { 
 
\t background:#FFFF99;} 
 
\t 
 
\t 
 
#slide_info { 
 
\t float: left; 
 
\t width:50%; 
 
\t padding-left: 0;} 
 
\t 
 
.slide_info { 
 
\t } 
 
\t 
 
#info1, #info2, #info3 { 
 
\t background-color: #fff; 
 
\t width: 50%; 
 
\t height: 500px; 
 
\t padding-top: 215px; 
 
\t padding-left: 30px;} 
 

 
.desc{ 
 
    float:left; 
 
} 
 
#slide_info{ 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="feat"> 
 
\t <ul id="slide_info"><div id="info"> 
 
    \t <div class="desc" id="info1"> 
 
\t \t \t <h2>Blue Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> 
 
     
 
     <div class="desc" id="info2"> 
 
\t \t \t <h2>Red Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     
 
     <div class="desc" id="info3"> 
 
\t \t \t <h2>Yellow Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     </div> 
 
\t </ul> 
 
    
 
<div id="slider"> 
 
    <a href="#" class="control_next" id="toggle_info">BUTTON</a> 
 
    <ul> 
 
    <li class="feat_slides" id="feat_slide1"></li> 
 
    
 
    <li class="feat_slides" id="feat_slide2"></li> 
 
    
 
    <li class="feat_slides" id="feat_slide3"></li> 
 
    </ul> 
 
</div> 
 

 
</div>

Answer 2

我看到的第一個明顯的事情是一個div作爲ul的直接子。
即使這可能不會導致任何問題，那肯定是無效的HTML。大多數現代瀏覽器正在修復這......但仍然是一件壞事。

因此<ul id="slide_info">內部的div元素必須包含<li>和</li>。

然後，關於您的代碼，您使用巧妙的appendTo技巧來「循環」整個列表項......爲什麼不使用相同的技巧？

現在關於淡入/淡出...有動畫延遲考慮。你可以使用回調函數，這些函數是在完成另一個函數時執行的函數。

$(document).ready(function(){ 

    // Variable declarations 
    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    // Positionning 
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    // ??? Why this "re-ordering" on load? 
    $('#slider ul li:last-child').prependTo('#slider ul'); 

    // Hide all slide-info item except the first 
    $("#slide_info li").not("#slide_info li:nth-child(1)").hide(); 

    // Click handler 
    $('a.control_next').click(function() { 

    // Animate the slides 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 300, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 

    // Animate slide infos 
    // Get the visible one into a variable 
    var visible = $("#slide_info li:visible"); 
    // Fade it out and fade in the next one 
    visible.fadeOut(300, function(){ 
     // This is a callback, so after the fadeOut: 
     visible.next().fadeIn(300,function(){ 
     // This is also a callback... 
     // "visible" is now faded out, but still in this variable. 
     // Append it to the end of the list. 
     visible.appendTo("#slide_info"); 
     }); 
    }) 
    }); 

}); 

Your Fiddle updated