懸停時用動畫改變div背景圖像的寬度

Question

我想改變懸停時div的背景圖像寬度。我的代碼是：

HTML：

<div class="block2 todrop" target="regbuyer.php"></div>

CSS：

.col1 .block2     { float: right; margin: 104px 0 0 0; width: 208px; height: 104px; background: url(../images/block2-1.jpg) no-repeat center center; background-size: 100% 100%; } 
.todrop       { cursor: pointer; } 

Answer 1

我只是重新閱讀的問題，並意識到我是一個doofus

你可以不會主動更改背景大小，但是，您可以使用具有不同背景大小的類，並且可以使用替代方法在兩個懸停之間。

$('.block2').hover(function(){ 
    $(this).removeClass('newSize').addClass('oldSize'); 
}, function(){ 
    $(this).removeClass('oldSize').addClass('newSize'); 
});​ 

該CSS。

.newSize{ 
    background-size:25% 25%; 
} 
.oldSize{ 
    background-size:100% 100%; 
} 

剛剛創建元素時就從其中一個元素開始，並且您可以很好地去。

Fiddle

Answer 2

喜歡的東西

$('.block2').live('mouseover', function() { 
    $(this).animate({width: '300px'}); 
}); 

$('.block2').live('mouseout', function() { 
    $(this).animate({width: '208px'}); 
});