javascript - slider 像 div 的动画来回移动？

Question

我想创建一个 slider ，当相应的链接被点击时，已经激活的幻灯片将向左移动，然后新的幻灯片将向左移动。

如何使用给定的 html 完成该操作？

我无法使用 .visible 来使它正常工作，稍后会破坏 $(this) 动画。尝试了一些其他方式来安排它，但仍然无法正常工作。也许我做错了，还有更多更好的方法可以实现这一目标。

html

  <div class="navigation-container">
    <ul class="navigation">
      <li class="nav-item active"><a data-show="dataitem0">
            Lorem ipsum         </a></li>
      <li class="nav-item"><a data-show="dataitem1">
    </ul>
  </div>

  <div class="data-container">
    <div class="data-inner">
      <div id="dataitem0" class="visible">
        <h2>11111Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsumed lorems vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem1" class="hidden">
        <h2>22222Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
    </div>
  </div>


.hidden {
  display: none;
  left:-400px;
}
.visible {
  display: block;
  left:0;
}
.data-container {
  .data-inner {
    position:relative;
    > div {
      position:absolute;
      width:100%;
      top:0;
    }
  }
}



$('li').on('click', function () {
  //alert('clicked');
  var dataShow = $(this).children('a').data('show');

  //console.log(dataShow);
  $('li').removeClass('active');
  $(this).addClass('active');

  $('.data-inner > div').each( function(){
    var dataItem = $(this).attr('id');

    if (dataShow === dataItem) {
      $('.visible').animate({
        left: "-=400"
      }, 1000, function() {
        // Animation complete.
        console.log('1anim complete');
        //$(this).attr('class', 'hidden');

        $(this).attr('class', 'visible').animate({
          left: "0"
        }, 1000, function() {
          // Animation complete.
          console.log('2anim complete');
        });
      });
    }

  }); // each
}); //click

代码笔: https://codepen.io/rKaiser/pen/LwLEqB非常感谢。

Answer 1

要达到预期的结果，请使用以下选项添加 .visible 类并将 .hidden 类添加到 .visible 类

var dataItem = $(this).attr("id");
var hideDataItem = $(".visible").attr("id");

      $(".visible").removeClass("visible");
      $("#" + dataItem).addClass("visible");

      $("#" + hideDataItem).addClass("hidden");

引用工作代码

$("li").on("click", function() {
  //alert('clicked');
  var dataShow = $(this)
    .children("a")
    .data("show");

  console.log(dataShow);
  $("li").removeClass("active");
  $(this).addClass("active");
  $(".data-inner > div").each(function() {
    var dataItem = $(this).attr("id");
    var hideDataItem = $(".visible").attr("id");
    if (dataShow === dataItem) {
      $(".visible").animate(
        {
          left: "-=500"
        },
        1000,
        function() {
          // Animation complete.
          //console.log('1anim complete');
          $(".visible").removeClass("visible");
          $("#" + dataItem).addClass("visible");

          $("#" + hideDataItem).addClass("hidden");
          $("#" + dataItem)
            .attr("class", "visible")
            .animate(
              {
                left: "0"
              },
              1000,
              function() {
                // Animation complete.
                //console.log('2anim complete');
              }
            );
        }
      );
    }
  }); // each
}); //click

body {
  background: #666;
  color: #ccc;
}
.hidden {
  display: none;
  left:-400px;
}
.visible {
  display: block;
  left:0;
}
.navigation-container {
  display:inline-block;
}
.active {
  color: red;
}
.data-container {
  max-width:400px;
  min-height: 310px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  background: #535353;
  margin-left: 40px;
  .data-inner {
    position:relative;
    > div {
      position:absolute;
      width:100%;
      top:0;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eda-module-content">

  <div class="navigation-container">
    <ul class="navigation">
      <li class="nav-item active"><a data-show="dataitem0">
            Lorem ipsum         </a></li>
      <li class="nav-item"><a data-show="dataitem1">

            Lorem ipsum  11111111111111       </a></li>
      <li class="nav-item"><a data-show="dataitem2">
            Lorem ipsum   22222      </a></li>
      <li class="nav-item"><a data-show="dataitem3">
            Lorem ipsum    333     </a></li>
      <li class="nav-item"><a data-show="dataitem4">
            Lorem ipsum     444    </a></li>
    </ul>
  </div>

  <div class="data-container">
    <div class="data-inner">
      <div id="dataitem0" class="visible">
        <h2>11111Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem1" class="hidden">
        <h2>22222Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem2" class="hidden">
        <h2>33333Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem3" class="hidden">
        <h2>44444Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem4" class="hidden">
        <h2>555555Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
    </div>
  </div>
</div>

codepen - https://codepen.io/nagasai/pen/GVENxp