2013-03-05 3 views
0

Получил эту концепцию nav, прекрасно работающую в Chrome и Firefox, но ее очень нервную в Safari. Кажется, что вначале он сначала оживает в Safari, а затем работает правильно. Есть идеи?JQuery Safari Animation Jumpy

<ul id="navigation"> 
    <a href="#"><li id="first"><span id="logo"></span><span class="navigation-text">Home</span></li></a> 
    <a href="#"><li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li></a> 
    <a href="#"><li class="standard"><span></span><span class="navigation-text">Gallery</span></li></a> 
    <a href="#"><li class="standard"><span></span><span class="navigation-text">GalleryGallery123</span></li></a> 
    <li id="last" class="standard"></li> 
</ul> 

<script type="text/javascript"> 
$(document).ready(function() { 

    // On hover: 
    $('#navigation li').hoverIntent(function() { 
     width = $(this).children('span:nth-child(2)').width(); 
     text = $(this).children('span:nth-child(2)');   

     var newwidth = (width + 15) // Original width + 15px padding   
     text.filter(':not(:animated)').animate({"width":"0px"}, 0).show(); // Make the width 0px and make the element visible 
     text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size 

    }, 
    function() { 
     text.filter(':not(:animated)').animate({"width":"0px"}, 150); // Animate the width to 0px and hide the element 
     text.animate({"width":+width+"px","float":"left"}, 0); 
     setTimeout(function() { 
      text.hide(); 
     },100); 
    }); 

}); 

</script> 

JSFiddle:

http://jsfiddle.net/7HWax/

ответ

2

Оказывается, что Safari не нравится анимация в 0px. Изменение 0px на 1px отсортировало анимацию, мигающую :)