简单的Jqueryhover放大

我不确定我哪里出错了。 我正在尝试使用缩放function使用Jquery创建一个非常简单的hover-enlarge插件。 这是我的代码：

$(document).ready(function(){ $("#content img").toggle("scale",{ percent: "80%" },0); $('#content img').hover(function() { $(this).css("cursor", "pointer"); $(this).toggle("scale",{ percent: "90%" },500); }, function() { $(this).toggle("scale",{ percent: "80%" },500); }); }); 

这是一个小例子： http ： //jsfiddle.net/8ECh6/

这是页面： http ： //samples.zcardna.com/health.html

如果somone知道我哪里出错那会很棒！ 谢谢！

Answer 1

好吧，我不确定你的代码为什么不起作用，因为我在尝试完成类似的事情时通常会采用不同的方法。

但是你的代码出错了。你使用scale的方式似乎有问题我通过将代码更改为以下来实际执行jQuery。

 $(document).ready(function(){ $('img').hover(function() { $(this).css("cursor", "pointer"); $(this).toggle({ effect: "scale", percent: "90%" },200); }, function() { $(this).toggle({ effect: "scale", percent: "80%" },200); }); }); 

但我总是通过使用CSS来设置我的缩放和转换。

这是一个例子，希望它有所帮助。

 $(document).ready(function(){ $('#content').hover(function() { $("#content").addClass('transition'); }, function() { $("#content").removeClass('transition'); }); }); 

http://jsfiddle.net/y4yAP/

Answer 2

如果您要放大的页面上有多个图像，请将ID命名为“content1”，“content2”，“content3”等。然后使用此扩展脚本，如下所示：

 $(document).ready(function() { $("[id^=content]").hover(function() { $(this).addClass('transition'); }, function() { $(this).removeClass('transition'); }); }); 

编辑：将“#content”CSS更改为：img [id ^ = content]以保持转换效果。

Answer 3

要创建简单的hover放大插件，请尝试此操作。 （DEMO）

HTML

JS

  $(function () { $('#content img').hover(function () { $(this).toggle(function () { $(this).width('70%'); }); }); });