Question

我正在研究css，当鼠标悬停在图像上时，它会变大。 e.g。

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

现在我想让它变得有点动画。喜欢它会慢慢放大，在鼠标移出时，它会慢慢缩小。请帮忙。

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

Answer 1

这些动画通常使用Javascript完成。不是手工编写Javascript，而是使用包含“.animate（）”方法的jQuery库可能更容易。 animate方法要求您将目标css属性作为参数提供，如下所示：

（既然你写过你不熟悉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

Answer 2

如果您不需要支持旧版浏览器，则可以使用CSS3 transition属性。它不需要任何JavaScript，适用于Safari，Firefox和Opera。 http://www.w3schools.com/css3/css3_transitions.asp

#image-div img {
    width:100px;
    height:100px;
    transition:all 1s ease-in-out
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
}
#image-div:hover img {
    width:200px;
    height:200px;
}

Answer 3

查看.animate()方法并将其与.hover()配对。这将允许您在鼠标悬停在特定元素上时应用特定的过渡，在这种情况下，根据需要进行缩放。

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

3 个答案: