简单的 Jquery 悬停放大 [英] simple Jquery hover enlarge

问题描述

我不确定我哪里出错了.我正在尝试使用缩放功能使用 Jquery 创建一个非常简单的悬停放大插件.这是我的代码:

I'm not sure where I'm going wrong. I'm trying to create a very simple hover-enlarge plugin with Jquery using the scale function. Here is my code:

$(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

如果有人知道我哪里出错了，那就太棒了！谢谢！

If somone knows where I've gone wrong that would awesome! THANKS!

推荐答案

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

Well I'm not exactly sure why your code is not working because I usually follow a different approach when trying to accomplish something similar.

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

But your code is erroring out.. There seems to be an issue with the way you are using scale I got the jQuery to actually execute by changing your code to the following.

$(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 来设置缩放和过渡..

But I have always done it by using CSS to setup my scaling and transition..

这是一个例子，希望对你有帮助.

Here is an example, hopefully it helps.

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

    }, function() {
        $("#content").removeClass('transition');
    });
});

http://jsfiddle.net/y4yAP/

这篇关于简单的 Jquery 悬停放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！