旋转木马改变时淡化背景的不透明度

Question

当我搬到下一个旋转木马项目时，我正在努力让旋转木马背景淡入淡出。在页面加载的下面的代码中淡入使用CSS和JS，但是使用jQuery使其在更改上工作不起作用。

JS-CSS：

function doCarouselBlur(imgEl) {
var root = imgEl.closest('.anlNoCarouselRoot');
if (root.length > 0) {
    console.log('position: ' + JSON.stringify(root.position()));
    console.log('width: ' + root.width());
    console.log('height: ' + root.height());
    console.log('src: ' + imgEl.attr('src'));
    var width = root.width() + 160;
    var height = root.height() + 40;
    root.find('.carouselBackground').css({
        'top': root.position().top - 20,
        'left': root.position().left - 120,
        'opacity': '0.92',
        'transition': 'opacity 2s ease',  // THIS WORKS ON LOAD BUT WON'T WORK FOR ON CHANGE
        'background-image': 'url(' + imgEl.attr('src') + ')',
        'width': width,
        'height': height,
        'z-index': '-10',
        'clip': 'rect(20px, ' + width + 'px, ' + height + 'px, 20px)',
    });

    root.find('.dark-carousel-overlay').css({
        'top': root.position().top - 20,
        'left': root.position().left - 120,
        'width': width,
        'height': height,
        'z-index': '-8'
    });
  };
}

为改变过渡而增加的观念：

$('div.carouselBackground').on('change', function() {
    $(this).fadeTo('slow', '0');
    $(this).fadeTo('slow', '0.92');
});