背景颜色在旋转木马上褪色答案

【问题标题】：Background colour fade on carousel背景颜色在旋转木马上褪色
【发布时间】：2016-10-24 21:54:25
【问题描述】：

我想创建一个全宽滑块（固定高度），其中背景颜色随着幻灯片内容（透明 PNG）的滑入而逐渐消失。

我正在考虑可能修改 Owl Carousel 来做到这一点，但我很乐意使用任何可以在颜色和幻灯片之间提供平滑过渡的东西。

任何帮助将不胜感激

【问题讨论】：

欢迎来到 SO。请先阅读此内容：http://stackoverflow.com/help/how-to-ask 并在问题描述中添加您的努力。
CSS3 Fade Effect的可能重复
感谢您抽出宝贵时间查看此问题。它与 CSS3 Fade 效果不同。我已经尝试为每个包含背景颜色的十六进制代码的轮播项目添加一个数据属性，但是在检索这个十六进制时遇到了问题。

标签： javascript jquery

【解决方案1】：

再次感谢您的帮助。我设法弄清楚了。如果其他人想知道，您可以在这里查看...

http://jsfiddle.net/hantastic/qtxgnx73/

(function($) {

  //Function to animate slider captions 
  function doAnimations(elems) {
    //Cache the animationend event in a variable
    var animEndEv = 'webkitAnimationEnd animationend';

    elems.each(function() {
      var $this = $(this),
        $animationType = $this.data('animation');
      $this.addClass($animationType).one(animEndEv, function() {
        $this.removeClass($animationType);
      });
    });
  }

  //Variables on page load 
  var $myCarousel = $('#carousel-example-generic'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

  //Initialize carousel 
  $myCarousel.carousel();

  //Animate captions in first slide on page load 
  doAnimations($firstAnimatingElems);

  //Pause carousel  
  $myCarousel.carousel('pause');


  //Other slides to be animated on carousel slide event 
  $myCarousel.on('slide.bs.carousel', function(e) {
    var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
    doAnimations($animatingElems);
  });

})(jQuery);

【讨论】：