CODEWITHSUNDEEP
jqueryinternet-explorerjquery-animate
McCheesy
McCheesy

Reputation: 1

jQuery.animate() fails in Internet Explorer

Forgive me if this has been answered somewhere else--I've been researching like crazy, but none of the "fixes" I found worked for me.

Basically, I am using jQuery.animate() to move a div within an li tag down about 150px. It begins with a top: -150 and is hidden using overflow:hidden. Upon mouseover of the containing li, it should animate down to top:0. This all works marvelously in Chrome and FF, but in IE, I get nothing. I tried using the IE developers toolbar and traced through without any errors. It seems that for some reason the 'top' attribute just never gets changed in the animate function, but I am not understanding why or what I need to change to fix it. Any assistance is greatly appreciated.

Here's the code:

/edit le final

Finally ended up just working around the issue by using the "height" attribute of the div for the animation instead of "top." That, along with the padding and border-width attributes and I was able to essentially get the same effect. Still not entirely sure why the "top" attribute wouldn't work, but c'est la vie.

Upvotes: 0

Views: 195

Answers (1)

Tats_innit
Tats_innit

Reputation: 34107

Hiya working demo tested in IE 8 :) http://jsfiddle.net/EbRgW/ or http://jsfiddle.net/EbRgW/show/

Good read: http://api.jquery.com/jQuery.noConflict/

var $jq = jQuery.noConflict(); will do the trick in your case.

This will help,

Jquery Code

$(document).ready(function() { //http://api.jquery.com/jQuery.noConflict/
    var $jq = jQuery.noConflict();
    $jq('.accordion li').hover(function() {
        $jq(this).children('.accordion-textbox').stop().animate({
            top: '0px'
        }, 600);
    }, function() {
        $jq(this).children('.accordion-textbox').stop().animate({
            top: '-150px'
        }, 200);
    });
});

Upvotes: 1

Related Questions