简单的Jquery悬停放大

Question

我不确定我哪里出错了.我正在尝试使用缩放功能使用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/