javascript - 在出现时赋予隐藏的 div 效果

Question

我有以下代码：

http://jsfiddle.net/EMX4Q/

这很简单，当您将鼠标悬停在图像上时，它会显示相同的图像但更大。

我想在图片上实现类似谷歌的效果：https ://www.google.com/search?q=image&oe=utf-8&client=ubuntu&channel=fs&um=1&ie=UTF-8&hl=es&tbm=isch&source=og&sa =N&tab=wi&ei=p6wJUKMpg7LbBfTszdMH&biw=1680&bih=615&sei=qawJUKfHI9Lr0QGOouiLBA

我怎么能做到？

Answer 1

使用 jQuery animate()，或使用 time 参数的 addClass()/removeClass()。这是我用过的一个例子：

$('.circle').hover(
  function () {
    $(this).addClass('bigger-outer', 1000);
  }, 
  function () {
    $(this).removeClass('bigger-outer', 1000);
  }
);

因此，它将在悬停时添加/删除带有圆形类的任何东西上的较大外部类，并在 1000 毫秒或一秒内转换。