最初选择时出现 JQuery 滑块而不是滑动 - IE9

Question

下午好，

我遇到了 IE9 问题，希望有人可以提供帮助。 在 FF 和 IE10+ 中，滑块效果可以正常工作。

问题： 我有一个嵌套的 div，一个隐藏，一个显示。 当我最初翻过outerDiv 时，innerDiv 出现时没有滑动效果。任何重复的翻滚动作，innerDiv 会随着滑动效果出现/消失并正常运行。

预期结果： 我想让幻灯片效果与 IE9 中的初始翻转一起使用。

我试过 .slideToggle 和 .animate 都没有成功。

我认为它与时间有关...在 DOM 中存在 div 之前调用它，但我无法确定它。

我们将不胜感激。

谢谢

HTML

<div id="outerDivTest" class="circle outerDiv">
  <div id="innerDivTest" class="innerDiv">
        Lorem ipsum dolor sit amet, populo sadipscing id nam.
  </div>
</div>

jQuery

$("#outerDivTest").addClass('visible').show("scale",{},'slow');

$(".outerDiv").on("mouseenter", function() {
  $("#innerDivTest").addClass('visible').slideDown(1000);
});

$(".outerDiv").on("mouseleave", function() {
  $("#innerDivTest").addClass('visible').slideUp(1000);
});

CSS

#outerDivTest {
  position: relative;
  top: 100px;
  left: 100px;
  background-color: #29abe2;
  border-width: 0;
  height: 100px;
  width: 100px;
  display: none;
  overflow: hidden;
  z-index: 100;
}

#innerDivTest {
  top: 0;
  height: 150px;
  width: 100px;
  background-color: #333;
}

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.visible {
  visibility: visible;
}

Answer 1

如果原因是因为文档尚未完全加载，那么只需将其包装在 document.ready 中：

 $(document).ready(function ()
   {
     $("#outerDivTest").addClass('visible').show("scale",{},'slow');

     $(".outerDiv").on("mouseenter", function() {
        $("#innerDivTest").addClass('visible').slideDown(1000);
     });

     $(".outerDiv").on("mouseleave", function() {
       $("#innerDivTest").addClass('visible').slideUp(1000);
     });
   }
 );