開始jQuery的寬度：「切換」爲零

值我有以下jQuery代碼：開始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/

在此先感謝您的幫助。

來源

2012-02-27 kdev

你試試我的最新答案嗎？ – 2012-02-27 21:16:35

如果你這樣做是什麼：

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，我實際上看不到閃爍。試一試。

來源

2012-02-27 18:03:38

你看它是如何跳躍的嗎？ OP不希望發生這種情況。 – j08691 2012-02-27 18:05:47

哎呀抱歉意識到這是不正確的.. – 2012-02-27 18:06:01

現在修復..再試一次 – 2012-02-27 18:58:38

請問這是可以接受的：jsFiddle

的jQuery：

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

小CSS變化：

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

來源

2012-02-27 18:13:55 j08691

感謝您的回覆。您可以使用toggle（）（這是我以前使用的效果）來實現您的效果。我真的希望它能像我最初的jsfiddle一樣工作，但是起點相反。 – kdev 2012-02-27 18:41:14

開始jQuery的寬度：「切換」爲零

回答

相關問題