javascript - 使用 Javascript 缓慢过渡到悬停状态

Question

我正在研究 CSS，当鼠标悬停在图像上时，它会变大。例如

#image-div img { width:100px; height:100px;}
#image-div:hover img { width:200px; height:200px;}

现在我想让它有点动画。就像它会慢慢放大，鼠标移开时，它会慢慢缩小。请帮忙。

注意:我对 javascript 不是很熟悉。

Answer 1

这些动画通常使用 Javascript 完成。与其手动编写 Javascript，使用 jQuery 库可能更容易，它包含“.animate()”方法。 animate 方法要求您将 objective-c ss 属性作为参数，如下所示:

(由于您不熟悉 Javascript，我已经包含了包含 jQuery 库所需的一切)

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">google.load("jquery", "1.6.4");</script>

<script type="text/javascript">

    $(document).ready(function(){

        $("#image-div img").live({mouseenter:myfin,
              mouseleave:myfout});

    });
    function myfin () {
    $(this).animate({height: 200, width: 200},1000); //1000 = 1 second animation
}
function myfout () {
    $(this).animate({height: '', width: ''},1000); //1000 = 1 second animation
    //setting the height and width to '' will clear the inserted style, leaving you with your original style
}
</script>

然后您需要做的就是在您的 CSS 中将高度和宽度设置为 100px，并删除#image-div:hover 定义。

如果您想在 CSS 文件中使用类定义来制作动画，您可以使用 jQuery 插件来实现。请参阅以下问题以获得帮助:

jQuery.animate() with css class only, without explicit styles