jquery - 单击按钮时，一个 DIV 淡出，而另一个 DIV 在同一位置淡入

Question

我有一个功能齐全的图像 slider float 在 (3) 个 DIVS 的无序列表旁边。 slider 的第一种颜色与第一个 DIV 相对应。我正在尝试创建一种效果，当有人单击 slider 上的“下一个”按钮时， slider 不仅会过渡到下一个颜色，而且 float 在其旁边的 DIV 也会淡出，而对应的下一个 DIV 会淡出。到下一个颜色淡入。

我的 slider 可以工作，但我很难弄清楚如何让每次单击按钮也能够连续循环遍历与 slider 颜色相对应的每个 DIV。

我是jquery的一个相对初学者，但是我可以理解它的一些更复杂的逻辑，我只是​​想不通。我尝试将 DIV 的溢出隐藏起来，并遵循与图像 slider 相同的过程，但没有成功。

我真的很感激任何帮助。到目前为止我所拥有的 Jsfiddle 如下。

    <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 ($) {
  
	var slideCount = $('#slider ul li').length;
	var slideWidth = $('#slider ul li').width();
	var slideHeight = $('#slider ul li').height();
	var sliderUlWidth = slideCount * slideWidth;
	
	$('#slider').css({ width: slideWidth, height: slideHeight });
	$('#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', '');
        });
    };
	
    $('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 {
  	width: 100%;}
  
  
.feat_slides {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;}
	
#feat_slide1 {
	background: #006699;}
	
#feat_slide2 {
	background: #CC0033;}
	
#feat_slide3 {
	background:#FFFF99;}
	
	
#slide_info {
	float: left;
	width:50%;
	padding-left: 0;}
	
.slide_info {
	}
	
#info1, #info2, #info3 {
	background-color: #fff;
	width: 50%;
	height: 500px;
	padding-top: 215px;
	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">
	<ul id="slide_info"><div id="info">
    	<div class="desc" id="info1">
			<h2>Blue Header</h2>
			<p>Description</p>
        </div>
        
        <div class="desc" id="info2">
			<h2>Red Header</h2>
			<p>Description</p>
        </div>	
        
        <div class="desc" id="info3">
			<h2>Yellow Header</h2>
			<p>Description</p>
        </div>	
        </div>
	</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>