javascript - 最初选择但不滑动时出现的 JQuery slider - IE9

Question

下午好，

我遇到了 IE9 问题，希望有人可以提供帮助。 在FF和IE10+下， slider 效果正常，功能正常。

问题: 我有一个嵌套的 div，一个隐藏，一个显示。 当我最初滚动 outerDiv 时，innerDiv 出现时没有滑动效果。任何重复的翻滚 Action ，innerDiv随滑动效果出现/消失，功能正常。

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

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

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

如有任何帮助，我们将不胜感激。

谢谢

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);
     });
   }
 );