Question

我已经用Google搜索并找到了几种解决方案，但没有人符合我的需求，所以我必须在这里问：

我找到了一个包含非常棒的滑块的网站，请看这里：http://www.lysebu.no/en/hotel。我说说底部的第二个滑块。滑块本身很容易构建，但如果你切换到另一个类别，我对动画更改印象非常深刻，所以我试图自己重建它，也许我可以在未来的项目中使用它。不幸的是，我不知道如何实现动画的变化，我只能通过CSS改变整个动画，但这不是我想要的。我的滑块包含17个图像，结构类似于通常的自举滑块。我的尝试是使用jQuery的.css方法更改CSS-Properties，看起来像这样（在SO上找到CSS代码，只是顺便说一下）：

function change_ani() {
    item = $('.carousel .item');

    item.css("-webkit-transition", "opacity: 3s");
    item.css("-moz-transition", "opacity: 3s");
    item.css("-ms-transition", "opacity: 3s");
    item.css("-o-transition", "opacity: 3s");
    item.css("transition", "opacity: 3s");

    $(".carousel .active.left").css("left", 0);
    $(".carousel .active.left").css("opacity", 0);
    $(".carousel .active.left").css("z-index", 2);

    $(".carousel .active.right").css("left", 0);
    $(".carousel .active.right").css("opacity", 0);
    $(".carousel .active.right").css("z-index", 2);

    $(".carousel .active.next").css("left", 0);
    $(".carousel .active.next").css("opacity", 1);
    $(".carousel .active.next").css("z-index", 1);

    $(".carousel .active.prev").css("left", 0);
    $(".carousel .active.prev").css("opacity", 1);
    $(".carousel .active.prev").css("z-index", 1);

}

这里调用函数：

$("#rooms_div").click(function() {
    showRooms();
    $('#carousel-slider2').carousel(0);
    change_ani();
});

“＃rooms_div is”滑块中的框在开头是发白光。不幸的是，这不起作用。我不熟悉JS或jQuery，所以我希望有人知道如何解决这个问题。它不一定是完美的代码，你也可以给我快速和脏的代码，我只是希望它的工作原理。

Answer 1

Bootstrap Carousel使用CSS3动画。如果你想淡化，可以将它作为一个类使用。

.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}

http://codepen.io/Rowno/pen/Afykb

Answer 2

工作DEMO

我想这就是你想要的

码

var i = 1;
$('.right').click(function () {
    if (i < $('.box').length) {
        $("#box" + i).animate({
            left: '-50%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('left', '150%')
                .appendTo($('.container'));
        });
        $("#box" + i).next().animate({
            left: '50%'
        }, 400);
        i++;
    }
});
$('.left').click(function () {

    if (i > 1) {
        $("#box" + i).animate({
            left: '150%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('right', '-150%')
                .appendTo($('.container'));
        });
        $("#box" + i).prev().animate({
            left: '50%'
        }, 400);
        i--;
    }
});

希望这有帮助，谢谢

如何在引导滑块中更改动画

2 个答案:

工作DEMO

码