最初選擇時出現jQuery滑塊而不是滑動-IE9

Question

下午好，

我遇到了IE9問題，希望有人可以提供幫助。 在FF和IE10 +中，滑塊效果可以正常工作。

問題：我有一個嵌套的div，一個隱藏，一個顯示。 最初將鼠標懸停在externalDiv上時，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);
     });
   }
 );