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

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

1 个答案: