0

このナビゲーションの概念はChromeとFirefoxで正常に機能しますが、Safariでは非常にジャンプします。Safariで最初に半分アニメーション化してから、正しく実行されるようです。何か案は？

<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/

4

1 に答える 1

2

Safari は 0px へのアニメーション化を好まないことがわかりました。0px を 1px に変更すると、アニメーションが点滅します:)

于 2013-03-05T22:48:16.583 に答える