Question

我有以下jQuery代码：

jQuery(document).ready(function(){
    $('#logo').hover( function() {
      $('#logo span').stop(true, true).animate({
        width: 'toggle'
      }, 1000, function() {
        // Animation complete.
      });
    });
});

这需要在#logo中占用一个范围并设置其宽度。这是完美的，除了我希望跨度以零宽度开始然后切换。我可以传递函数另一个在页面加载时切换宽度的函数，但是当页面首次加载时我不想要一个丑陋的闪烁。

我尝试添加width: 0px;，但这完全打破了它。

这是我的jsfiddle：http://jsfiddle.net/s6WYr/2/

提前感谢您的帮助。

Answer 1

如果你这样做怎么办：

a#logo span {
 display: inline-block;
}

然后在页面中的#logo div之后，添加一个脚本部分并执行

<a id="logo" href="<?php bloginfo('url');?>">m<span>y</span>.lo<span>go</span></a>
<script type="text/javascript">
   $("#logo span").hide();
</script>

不要等待文件准备好，因为它会在之后触发。这应该足够快，你不会看到它（至少对我而言）。

即使使用$（document）.ready（）但是YMMV，我实际上也看不到闪烁。试一试。

Answer 2

这是否可以接受： jsFiddle

jQuery的：

$('#logo span').hide();
$('#logo').hover(
    function(){
        $('#logo span').show(1000);
    },
    function(){
        $('#logo span').hide(1000);
    }
);

小CSS更改：

a#logo span {
    display:inline-block;
}

启动jQuery width：'toggle'，其值为零

2 个答案: