2012-03-19 100 views
2

我想動畫從10px到0px的border-bottom-width,我該怎麼做?jQuery動畫邊框底寬

$(".shortener:last").animate({ 
     'borderBottomWidth' : '0px'}); 

這是行不通的,謝謝!

更新:我用下邊距:-10px

+1

oops ..我怕你不能這樣做:(http://bugs.jquery.com/ticket/7085 – prasann 2012-03-19 16:41:53

+0

看看[jQueryUI](http://jqueryui.com/)。沒有保證,但它允許 – Birdman 2012-03-19 16:49:25

+2

@prasann - 那個bug報告被關閉爲無效,我剛剛創建了一個jsFiddle,它顯示了底部邊界寬度的動畫效果就好了 – j08691 2012-03-19 16:50:46

回答

4

似乎在這個jsFiddle example做工精細:

的jQuery:

$("#block").animate({ 
    borderBottomWidth: "0px" 
    }, 1500); 

CSS:

div { 
width:100px; 
border:10px solid green; 
}​ 

HTML:

<button id="go">&raquo; Run</button> 
<div id="block">Hello!</div>​ 

注意的屬性值進行動畫就像你在你的例子中使用不需要引號。

+0

在小提琴中工作但不在這裏http://lf.me/ – Luis 2012-03-19 19:40:01

+0

另外,你是否知道如何選擇在IDvíaCSS中包含* WORD *的div?+1按鈕添加ID爲「___plusone_1」的iframe,每個按鈕上的姓氏增加,我想爲所有* plusone應用CSS規則*標籤。謝謝 – Luis 2012-03-19 19:41:41

+1

如果它在jsFiddle中工作,但不是一個你的站點,你可能有其他代碼(CSS,jQuery,JavaScript)可能有衝突。回答第二個問題,'$(「[id * =」+ text + 「]」)'應該可以工作。 – j08691 2012-03-19 19:46:14