views:

340

answers:

1

I'm a jQuery noob - so please excuse the probable basicness of this question.

I'm doing something pretty simple - on hover animate the position and size of an image. When you mouse over the images there are some noticeable 'jaggies' (in FF, chrome, safari and that other crappy browser) - is there a way to get rid of this? The jquery code is as follows and a live link is here kristechdev.metropoliscreative.com (hover over the icons).

<script type="text/javascript"> 

   $(document).ready(function() {

    $('#zoomNav li img').hoverIntent(

     function() {

      $(this).animate({'margin-top' :'-35px', 'margin-left' :'-10px', 'height' :'95px','width' : '79px' }, 
            'fast');
     }, 

     function() {

      $(this).animate({'margin-top' : '0px', 'margin-left' :'0px', 'height' :'70px','width' : '58px' }, 
            'fast');
    });    
   });



</script>
A: 

Might need to enable interpolation on images inside IE, if that's where the issue is.

danp
issue happens in FF, safari, chrome - havent checked opera but who uses that? :) - thanks!
@nikibrown - see stats... http://www.w3schools.com/browsers/browsers_stats.asp some are still using opera...
Reigel
***Edit* a friend did a quick screencast of the animation in slow mode (see 30 second mark) see the jaggies?**http://www.duzodesign.com/junk/kristech/kristech.htm