jquery - 当 div 悬停时展开图像或背景

Question

当 div 悬停时，我需要一个 div 背景图像来展开。最好的方法是什么？

它需要是一个流畅的动画。理想情况下，我想使用 JQuery，但我对编码很陌生，所以我可以使用现成的代码吗？

我刚刚创建了这段代码，它是一种享受！我希望它有帮助

<img class="wooll" src="/images1" style="position: absolute; margin: 0 0 0 20px;" />

<img  style="" src="/images2" class="grow"/>


$(".wooll, .grow").hover(function() {
   $('.grow').animate({
        'height': $(this).height() * 1.4,
        'width': $(this).width() * 1.4
    });
}, function() {
    $('wool, .grow').animate({
        'height': $(this).height() / 1,
        'width': $(this).width() / 1
    });
});​

Answer 1

使用CSS3，您可以在从一种样式更改为另一种样式时添加效果，而无需使用 Flash 动画或 JavaScript 并且仅使用纯 css。

看演示：- DEMO1

看演示：- DEMO2

我希望这能帮到您

HTML

<div>
</div>

CSS

div {
width:100px;
height:100px;
background:red;
}
div:hover {
width:200px;
height:200px;
background:yellow;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

Answer 2

非常简单的做法！ 您可以使用 CSS3 进行平滑过渡，只需将其应用于 CSS 中的背景：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

然后悬停

div:hover .background {
background-size: cover /* or you can use width/height */
}

JSFiddle 上的工作示例：http: //jsfiddle.net/AVyQc/3/

Answer 3

这是一个非常基本的语法示例和一个工作示例。

$("#mydiv").mouseover(function(){
    $("#mydiv").animate({width: '200', height: '200'},200);
});

我强烈推荐阅读 JQuery API 中的animate 函数并探索框架的特性。