Jquery “引导”；"；事件触发太早

我写了一个函数，它扩展了Bootstrap的旋转木马，在滑动时自动缩小或扩大幻灯片的高度。我希望能够有一个平滑过渡的不同高度的幻灯片。我的解决方案偶尔会起作用，但有时褪色的幻灯片在幻灯片完成之前就会变成空白，导致它看起来像一个非常笨拙的剪辑。我不确定到底是什么原因导致了这一点，但这似乎与“滑动”事件提前触发有关。通过滑动事件处理程序函数上的断点，我可以在滑动器完成之前捕获发生的事件。有人知道这可能是什么原因吗

$.fn.carouselAutoHeight = function (options) {

    var maxHeight = options.height;

    $(this).carousel({
        wrap: false
    }).carousel("pause");

    $(this).on('slide.bs.carousel', function(e){
        var $newDiv = $(e.relatedTarget)
        var $previousDiv = $(".item.slider.active", this);
        $newDiv.css({
            position:   'absolute',
            visibility: 'hidden',
            display:    'block'
        });
        var targetHeight = $newDiv.height();

        $newDiv.attr("style", "")
        function finishAnimate(){
            $newDiv.css("position", "relative");
            $(this).css("height", "");
        }
        $previousDiv.stop().animate({
            height: targetHeight + "px"
        }, "slow", finishAnimate);
        $(this).unbind('slid.bs.carousel').on('slid.bs.carousel', function(e){
            var x = 0;
            $(e.target).find(".item:not(.active)").attr("style","");
        });
    });

}

---

这困扰了我好几个月，我终于明白了。当活动项完成其转换时触发“slided”事件，如下所示

$active.one($.support.transition.end, function (e) {
    $next.removeClass([type, direction].join(' ')).addClass('active')
    $active.removeClass(['active', direction].join(' '))
    that.sliding = false
    setTimeout(function () { that.$element.trigger('slid.bs.carousel') }, 0)
}).emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)

这意味着，如果在您的幻灯片项目中发生任何其他转换并结束，则会导致幻灯片提前终止。现在，据我所知，我没有这样的转变（我从来没有写过）

然而，事实证明，文本类型的输入字段在chrome（可能是其他浏览器）中确实有一个本机转换，使其在聚焦时呈现蓝色。我的幻灯片事件一开始，输入就变得模糊，导致转换从蓝色淡出。一旦转换完成，它触发了我的旋转木马立即提前完成滑动

---

应该注意的是，bootstrap的设计并不是为了在旋转木马中包含这样的交互式内容，我只是在违反规则。但值得注意的是，这种本机转换可能在您的文档中“不可见地”发生。

有没有可能是bootply.com或jsfiddle.net？