试试这个解决方案:
http://jsfiddle.net/995zE/
它通过在单击按钮时添加过渡 css 来工作,当您缩放浏览器窗口时,它会删除该 css。
这适用于 Firefox、Chrome 和 IE 10。在 Firefox 和 IE 上,当您缩放时,过渡照常继续,并且缩放不会影响它。在 Chrome 上,转换快进到其最终状态。
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});