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

问题描述

我不确定我要去哪里错。我试图用scale函数创建一个非常简单的悬停扩展插件。这是我的代码：

  $（document）.ready（function（）{
 $（＃content img ）.toggle（scale，{
 percent：80％
}，0）; 
 $（'＃content img'）。hover（function（）{
 $（this）.css（cursor，pointer）; 
 $（this）.toggle（scale，{
 percent：90％
}， 500）; 
 
}，函数（）{
 $（this）.toggle（scale，{
 percent：80％
}，500 ）; 
 
}）; 
}）; 
  

下面是一个小例子： http://jsfiddle.net/8ECh6/

以下是网页： http://samples.zcardna.com/health.html

如果somone知道在哪里我出错了，太棒了！
谢谢！

解决方案

嗯，我不完全确定你的代码不工作，因为我通常会遵循不同的当你试图完成类似的事情时。

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

  $（document） .ready（function（）{
 $（'img'）。hover（function（）{
 $（this）.css（cursor，pointer）; 
 $（这个）.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/

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);

});
});

Here's a small example: http://jsfiddle.net/8ECh6/

Here's the page: 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.

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);

    });
});  

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屋！