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

Question

我有一个功能齐全的图像滑块浮动在 (3) DIVS 的无序列表旁边。滑块的第一种颜色对应第一个DIV。我正在尝试创建一种效果，当有人单击滑块上的 'next' 按钮时，不仅滑块会过渡到下一种颜色，而且漂浮在它旁边的 DIV 也会淡出，而下一个 DIV，对应于下一个颜色淡入。

我可以使用滑块，但我很难弄清楚如何允许每次单击按钮也连续循环每个与滑块颜色相对应的 DIV。

我是jquery的相对初学者，但我能理解它的一些更复杂的逻辑，我就是想不通。我尝试隐藏 DIV 的溢出，并遵循与图像滑块相同的过程，但没有成功。

非常感谢任何帮助。下面是我目前所拥有的 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>

Answer 2

我看到的第一个显而易见的事情是 div 作为 ul 的直接子代。
即使这可能不会引起任何问题，那也绝对是无效的 HTML。大多数现代浏览器 正在修复 这个...但这样做仍然是一件坏事。

因此 <ul id="slide_info"> 中的 div 元素必须由 <li> 和 </li> 包裹。

然后，关于您的代码，您使用了巧妙的 appendTo 技巧来 "cycle" 遍历列表项...为什么不使用相同的技巧呢？

现在关于淡入淡出 in/out...需要考虑动画延迟。您可以使用回调，这是在另一个函数完成时执行的函数。

$(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

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

On Button Click, a DIV Fades Out, While Another DIV Fades in at the Same Location

jquery

onclick

fade