简单的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');
});
} );
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');
});
});
这篇关于简单的jquery悬停放大的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!