按钮单击时，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