Question

我对代码的意思是，当我的带有过滤器的幻灯片类首先应该动画到左边和fadeout然后它应该被附加到轮播内部类的底部。不知怎的..它不起作用。请帮忙。提前致谢

HTML

<!DOCTYPE html>
<html>
<head>
    <title>slider</title>
    <link rel="stylesheet" type="text/css" href="assets/css/slider.css">
</head>
<body>
    <div class="carousel">
        <div class="carousel_inner">
            <figure class="slides">
                <img src="assets/images/post4.jpg">
            </figure>
            <figure class="slides">
                <img src="assets/images/post4-2.jpg">
            </figure>
            <figure class="slides">
                <img src="assets/images/post4-3.jpg">
            </figure>
        </div>
    </div>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/slider.js"></script>
</body>
</html>

JQuery的：

$(document).ready(function(){
    setInterval(function(){
       $(".slides:first").animate({"margin-left":"-290px"}).fadeOut().end().appendTo(".carousel_inner");
    },2000);
});

Answer 1

您的幻灯片未附加，因为.end()将删除最后一个选择器并返回到链接中的上一个选择器。因此$('.slides:first').end()将导致不存在元素。

Answer 2

setInterval(function(){
    var $first = $(".slides:first");
   $first.animate({"margin-left":"-290px"}, function() {
        var $img = $("<img />").attr("src", $first.find("img").attr("src")).on("load", function() {
            var fig = $("<figure />").addClass("slides");
            fig.append($(this));

            $first.parent().append(fig);
            $first.remove();
        });
   });
}, 2000);

小提琴：https://jsfiddle.net/36nzoxvk/1/

Answer 3

只有您需要使用的是.end().first()而不是.end()，因为end()遍历到父元素，然后您需要再次选择。

$(document).ready(function() {
  setInterval(function() {
    $(".slides:first").animate({
      "margin-left": "-290px"
    })
      .fadeOut().end().first().removeAttr('style')
      .appendTo(".carousel_inner");
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
  <div class="carousel_inner">
    <figure class="slides">
      <img src="http://dummyimage.com/300x200/F00/fff">
    </figure>
    <figure class="slides">
      <img src="http://dummyimage.com/300x200/0F0/fff">
    </figure>
    <figure class="slides">
      <img src="http://dummyimage.com/300x200/00F/fff">
    </figure>
  </div>
</div>

Answer 4

我会移动appendTo代码来完成动画的回调，如下所示：

$(document).ready(function(){
    setInterval(function(){
      var firstSlide = $(".slides:first")[0];
       $(firstSlide).animate({"margin-left":"-290px", "opacity": 0.5}, 
                             1600, //length of the slide/fadeout animation
                             function() {
                               //animation is complete, so move the slide to the end and fade it back it in, also reset the margin back to 0
                                $(firstSlide).appendTo('.carousel_inner').css("margin-left", 0).fadeTo(1000, 1);
                              }
       );
    },3000);
});

Codepen：http://codepen.io/nobrien/pen/redYPQ

无法让简单的jquery滑块工作

4 个答案: