Jquery：如何在鼠标悬停时放大图像以获得动态生成的图像

Question

如何在鼠标悬停时放大来自数据库的动态生成的图像的图像。我正在使用c＃代码绑定用户界面中的图像。我尝试了不同的Jquery插件，但大多数都与某些浏览器（IE 6）存在兼容性问题。请建议我出路。

感谢。

Answer 1

如果您要动态地向页面添加图像（来自数据库或其他外部源），那么您的第一个问题是如何确保jQuery了解它们。

JQuery为动态生成的内容提供了许多事件监听器，例如$ .live（）和$ .delegate（）。您将希望为内容区域分配一个侦听器，以使用这两个jQuery函数之一来查找正在加载的任何新图像。

一旦您的代码知道新添加的图像，您的下一个任务就是添加放大/缩小行为。根据你想要发生的事情，你可能最好的选择是使用jQuery的$ .hover（）事件。所以你的代码看起来像这样：

$("#myContentRegion").delegate("img", "hover", function(){
    $(this).animate({ 
            width: 200, height: 200 
        }, 5000, function() {
    $(this).animate({ width: 100, height: 100 });
  });

});