Question

我试图在用户点击图片后使用animate和width: toggle对图片旁边的文字实施滑动效果（如下面的jsfiddle所示）。

我遇到的问题是，当它“滑动”时，它会在文字之间出现故障;我的假设是，这是由于单词在元素中移动。

$('img').on('click', function(e) {
  $('span').animate({
    width: 'toggle'
  }, 400)
});

span {
  display: inline-block;
  max-height: 20px;
  width: auto;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x50" alt="">
<span>Name Surname</span>

有没有办法解决毛病效应？

Answer 1

试试这个。

$('img').on('click', function(e) {
	$('span').animate({width: 'toggle'}, 400);
});

span {
  display: inline-block;
  max-height: 20px;
  width: auto;
  position: absolute;
  overflow: hidden;
}

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="http://via.placeholder.com/50x50" alt="">
<span>Name&nbsp;Surname</span>

这是更新的Fiddle。

Answer 2

解决此问题的最简单方法是在CSS代码中设置white-space: nowrap来阻止文本换行。

$('img').on('click', function(e) {
  $('span').animate({
    width: 'toggle'
  }, 1200)
});

span {
  display: inline-block;
  max-height: 20px;
  width: auto;
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://via.placeholder.com/50x50" alt="">
<span>Name Surname</span>

宽度切换动画 - 毛刺效果

2 个答案: