Slow Performance in IE

[cjt-2]

I've recently adjusted a tutorial allowing for IMG rollover animations
that works great in FF but is very choppy in IE. When I rollover an
IMG, the IMG slides up 10px or so and goes back to its original
position on rollout. This happens very smoothly, as it should, in FF
but it's really slow and jittery in IE. Here's my script:

$(document).ready(function(){

                        //Larger thumbnail preview

                        $("ul.bubble li").hover(function() {
                                $(this).css({'z-index' : '10'});
                                $(this).find('img').addClass("hover").stop()
                                        .animate({
                                                marginTop: '-20px',
                                        }, 300);

                                } , function() {
                                $(this).css({'z-index' : '0'});
                                $(this).find('img').removeClass("hover").stop()
                                        .animate({
                                                marginTop: '0',
                                        }, 300);
                        });

                        //Swap Image on Click
                                $("ul.thumb li a").click(function() {

                                        var mainImage = $(this).attr("href"); //Find Image Name
                                        $("#main_view img").attr({ src: mainImage });
                                        return false;
                                });

                        });


I'm fairly new to jQuery so I apologize in advance if this is a basic
question. Any help would be appreciated though

[grabnerandi-2]

try http://ajax.dynatrace.com - it traces JAvaScript, DOM Access and
Rendering times in IE6, 7 and 8

On Nov 6, 11:46 am, cjt <christian.t...@...> wrote:

> I've recently adjusted a tutorial allowing for IMG rollover animations
> that works great in FF but is very choppy in IE. When I rollover an
> IMG, the IMG slides up 10px or so and goes back to its original
> position on rollout. This happens very smoothly, as it should, in FF
> but it's really slow and jittery in IE. Here's my script:
>
> $(document).ready(function(){
>
>                         //Larger thumbnail preview
>
>                         $("ul.bubble li").hover(function() {
>                                 $(this).css({'z-index' : '10'});
>                                 $(this).find('img').addClass("hover").stop()
>                                         .animate({
>                                                 marginTop: '-20px',
>                                         }, 300);
>
>                                 } , function() {
>                                 $(this).css({'z-index' : '0'});
>                                 $(this).find('img').removeClass("hover").stop()
>                                         .animate({
>                                                 marginTop: '0',
>                                         }, 300);
>                         });
>
>                         //Swap Image on Click
>                                 $("ul.thumb li a").click(function() {
>
>                                         var mainImage = $(this).attr("href"); //Find Image Name
>                                         $("#main_view img").attr({ src: mainImage });
>                                         return false;
>                                 });
>
>                         });
>
> I'm fairly new to jQuery so I apologize in advance if this is a basic
> question. Any help would be appreciated though