jQuery动画幻灯片而不重绘内容

Question

A helpful SO answer教我如何通过水平滑动而不是垂直滑动来切换元素。

$('div').animate({ width: 'toggle' });

但是，当元素中包含文本时，会出现一个新问题-动画宽度会导致自动换行，而其他敏感元素的反应就会很差。

设置动画时，动画的高度会跳到整个位置，效果非常不愉快。此代码段充分说明了问题：

$('a').click(function() {
  $('div').animate({
    width: 'toggle'
  });
});

div {
  background-color: red;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>a b c d e f g h</div>
<a href="#">test</a>

我希望将其视为静态图像-如果自动换行产生两行，则动画时应保留为两行。其他所有东西都已经酷起来了。

http://jsfiddle.net/tdbhmcaz/

Answer 1

问题是因为在动画时更改元素的width会导致文本溢出。

要解决此问题，您可以改为使用包含div的{​​{1}}，然后为内部overflow: hidden的{​​{1}}属性设置动画，如下例所示

left

div

$('a').click(function() {
  $('.content').animate({
    left: $('.content').css('left') === '0px' ? '-100px' : '0px'
  });
});

还请注意，jQuery 1.9.1已过时。我建议对其进行更新。