CODEWITHSUNDEEP
javascriptjquerycssinternet-explorerslider
Rei
Rei

Reputation: 33

JQuery slider appearing when initially selected and not sliding - IE9

Good Afternoon,

I am having an IE9 issue and was hoping that there may be somebody out there that can assist. In FF, and IE10+, slider effect works fine and functions normally.

Issue: I have a nested div, one hidden, one shown. When I initially roll over the outerDiv, the innerDiv appears without the slide effect. Any repeated roll over actions, the innerDiv appears/disappears with the slide effect and functions normally.

Expected Result: I want to get the slide effect to work with the initial rollover in IE9.

I've tried .slideToggle and .animate without success.

I'm thinking that it has something to do with timing...calling the div before it exists in the DOM, but I can't put my finger on it.

Any assistance provided will be greatly appreciated.

Thanks

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

Upvotes: 1

Views: 43

Answers (1)

Sergio S
Sergio S

Reputation: 192

if the reason is because the document isn't fully loaded yet then just wrap it in 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);
     });
   }
 );

Upvotes: 1

Related Questions