bootstrap是非常棒的前端开发套件。
?
但是在IE浏览器里，效果没有chrome,firefox好。原因是因为最新的普及版 IE9对CSS3仍然支持不到位。
?
我研究了不能展现动画效果的问题。
?
举个例子 alert 插件。
?
?
<div class="fade in alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
?
在chrome下，点击 X 可以渐隐整个alert提示。但是在IE下就不能。
我在查看源代码前，一直认为bootstrap的动画效果是依靠jquery的。但是实际却是依靠css3。
?
!function ($) { "use strict"; // jshint ;_; /* ALERT CLASS DEFINITION * ====================== */ var dismiss = '[data-dismiss="alert"]' , Alert = function (el) { $(el).on('click', dismiss, this.close) } Alert.prototype.close = function (e) { var $this = $(this) , selector = $this.attr('data-target') , $parent if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 } else { alert('fuck'); } $parent = $(selector) e && e.preventDefault() $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) $parent.trigger(e = $.Event('close')) if (e.isDefaultPrevented()) return $parent.removeClass('in') function removeElement() { $parent .trigger('closed') .remove() } $.support.transition && $parent.hasClass('fade') ? $parent.on($.support.transition.end, removeElement) : removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ var old = $.fn.alert $.fn.alert = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('alert') if (!data) $this.data('alert', (data = new Alert(this))) if (typeof option == 'string') data[option].call($this) }) } $.fn.alert.Constructor = Alert /* ALERT NO CONFLICT * ================= */ $.fn.alert.noConflict = function () { $.fn.alert = old return this } /* ALERT DATA-API * ============== */ $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)}(window.jQuery);?
看遍以上这个插件没发现任何jquery.fadeIn()函数的踪影。
其实，实际起到fadeIn作用的是?$parent.removeClass('in'),即去掉div的in样式表。我们看到div有fade和in两个样式表。为什么一旦去掉in就会有渐隐效果呢(在chrome里)?
我们看看bootstrap.css里的
?
.fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear;}.fade.in { opacity: 1;}?这里可以看到chrome运用css3的-webkit-transition的样式来达到这一目的，将 in 去掉后，只剩fade,则-webkit-transition执行 linear动作，将透明度以0.15s的速度降为0,这样就实现了渐隐效果。
?
同样的，我们还可以看到collapse插件的高度渐减效果，也是用css3实现
.collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease;}?
而一切的一切，都是因为fuck IE不支持transition这个css3特性。和bootstrap用没用jquery无关。
?
最后我想说，chrome must be winner for freedom.
?