Question

我正在使用jQuery UI中的幻灯片动画在一行中插入另外两个div，但是当触发动画时，会发生div滑动跳转所需的空间而没有动画然后动画进来

编辑：JSFiddle问题已经解决，感谢下面的人。新JSFiddle是：https://jsfiddle.net/7ryukzd7/3/ 但最初的问题仍然存在： - ）

由于我没有得到的原因，在JSFiddle中，div不会内联而是中断（在浏览器中不会发生）...无论如何，这一点仍然有说明。（现在已解决）

我的代码：

HTML：

<div class="bloc cover" style="background-color: blue;"><p class="readmore_button">Read More</p></div>
<div class="bloc hidden" style="background-color: red"><p>Lorem ipsum dolor sit amet. </p></div>
<div class="bloc cover" style="background-color: blue;"></div>
<div class="bloc cover" style="background-color: blue;"></div>

CSS：

.bloc {
    display: inline-block;
    vertical-align: top;
}
.cover {
    width: 100 px;
    height: 100 px;
}
.hidden {
    height: 100 px;
    width: 200 px;
}

JS with jQuery UI：

$('.hidden').hide();

$('.readmore_button').on('click', function() {
    $(this).parents('.bloc').next('.hidden').toggle("slide", 1000);
});

我在这里看到了类似的问题：jQuery UI show using slide animation jumps to full height before animation starts但无法适应我的情况。

任何帮助都会非常感激，无论是内联块在JSFiddle（已解决）中的动画中断还是在实际问题上的原因： - ）

Answer 1

@Michael Coker是对的;在动画div.hidden的过程中，幻灯片动画效果将临时CSS应用于元素，其中包括对display:inline-block的抨击。

一种选择确实是覆盖原生的jQ-ui风格;另一个是不依赖于div元素的内联块样式，以便动画不会那样反应。一种方法是使用浮动元素：

.bloc {
  /*display: inline-block;*/
  vertical-align: top;
  float: left;
  margin: 0 2px /* added to recreate the spacing inline-block elements have */
}

https://jsfiddle.net/7ryukzd7/3/

jQuery UI幻灯片跳转创建空间然后动画

1 个答案: