Question

我在问题上找了一个类似的问题，但看起来我很独特。所以我有一个div列表，其中包含<a>标记，然后切换出内部描述，该描述位于父div内的隐藏span标记内。

我依靠jQuery UI库为滑动切换设置动画。 jQuery toggle和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.
  });
});

一切正常但是当幻灯片动作动画时，它会在新的一行（块）上滑出，然后当动画完成时它会弹出＆＃39; flicks＆＃39;回到我最初为它设置的内联样式。

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

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

是否可以使用jQuery切换库？

Answer 1

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

它实际上将span元素替换为div，其类别为ui-effects-wrapper，当然div的标准显示类型为{{1 }}

如果你看一下这个js-fiddle，你就会明白为什么会这样做。这是为了避免滑入的文本与已经存在的文本重叠。（在那个小提琴中，我覆盖了block的显示风格。）

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

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

1 个答案: