用动画改变悬停时div背景图像的宽度答案

【问题标题】：change width of div background image on hover with animation用动画改变悬停时div背景图像的宽度
【发布时间】：2012-10-06 02:13:00
【问题描述】：

我想在悬停时更改 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;  }

【问题讨论】：

标签： jquery image background hover

【解决方案1】：

我刚刚重新阅读了这个问题并意识到我是个傻瓜

您不能主动更改背景大小，但是，您可以使用具有不同背景大小的类，并在悬停时在两者之间交替。

$('.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

【讨论】：

【解决方案2】：

类似

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

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

【讨论】：

.live() 已经被弃用了一段时间。我们现在使用$('static_element').on('event', 'dynamic_element', function(){ //do work });。