在按钮内滑动切换文本内容

Question

我寻找过与我的问题类似的问题，但我似乎是独一无二的。 所以我有一个 div 列表，其中有一个 <a> 标记，然后切换出一个内联描述，该描述位于父 div 内的隐藏跨度标记内。

我依靠 jQuery UI 库来为滑动切换设置动画。默认情况下，jQuery 切换和 slideToggle 不适合我想要的 - 我只想沿着 x 轴（宽度）平滑地制作动画。

以下是 HTML 代码示例：

<div class="links" id="qanzac100">
  Q ANZAC 100 <a class="first">+</a>
  <span class="hide"> brings our shared history to life and creates a renewed legacy for future generations.
  </span>
</div>

我已经制作了这样的 jQuery/JS 脚本循环：

// jQuery toggle for other sites buttons
$(document).ready(function() { //supposed to stop FOUC
  $(".hide").hide();

  $(".first").click(function() {

    if ($(this).html() == '+') {
      $(this).html('-')

    } else if ($(this).html() == '-') {
      $(this).html('+')
    }

    $(this).next('.hide').toggle("slide", "right", 500);
    // Animation complete.
  });
});

一切正常，但是当滑动动作动画时，它会滑出一个新的行（块），然后当动画完成时，它会“轻弹”回到我最初为它设置的内联样式。

为了更好的说明目的，这里是 JS Fiddle http://jsfiddle.net/coolwebs/dx8fd51f/10/

我只是想让它平滑地滑出并在同一行显示所有内容，如果它需要推到下一行，它会在达到最大宽度时执行。

这可以使用 jQuery 切换库吗？

Answer 1

问题在于您正在使用的 jQuery UI 库。

它实际上将您的span 元素替换为div 和ui-effects-wrapper 类，当然div 的标准显示类型是block。

如果您查看此js-fiddle，您就会明白为什么会这样。这是为了避免滑入的文本与已经存在的文本重叠。 （在那个小提琴中，我覆盖了ui-effects-wrapper 的显示样式。）

有几种方法可以解决这个问题，但最简单的方法是不依赖 UI 库，而只使用类切换来运行动画。