更改jQuery宽度/高度动画的方向 [英] Changing direction of jquery width/height animation

问题描述

我刚刚开始学习如何使用jQuery制作动画，但我很难找到解决我所遇到的一个小美学问题的解决方案（如果有的话）。

I've just started learning how to animate using jQuery and I am having trouble finding a solution (if there even is one) to a small aesthetic issue I am having.

这是我正在使用的代码：

Here is the code I am working with:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script> 
$(document).ready(function(){
$(".cause_button").css("cursor","pointer");
$(".cause_button").on('mouseenter',function(){
  $(this).stop().animate({height:100, width:100, opacity:1.0}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75}, "fast");s
});
});
</script>

这是一个非常简单的鼠标悬停动画，其图像为 .cause_button类。动画效果很好，但是向右下方扩展了宽度/高度。有什么方法可以使图像向各个方向向外扩展？

It's a pretty simple hover in/out animation on an image with a class of ".cause_button". The animation works well but expands the width/height down and to the right. Is there any way that I could get the image to expand outward in all directions?

jsFiddle： http://jsfiddle.net/FHkw2/1/

jsFiddle: http://jsfiddle.net/FHkw2/1/

PS：我知道有使用CSS3的替代方法过渡效果，但它们达到相同的结果，并且似乎与浏览器不兼容，所以我试图着重使用jQuery。

PS: I understand that there are CSS3 alternatives using the transition effects but they achieve the same result and seem less compatible with browsers so I am trying to focus on using jQuery for this.

推荐答案

在动画制作过程中更改顶部和左侧属性：

Change "top" and "left" attributes during aniomation:

$(".cause_button").on('mouseenter',function(){
    $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
});

在这里检查： http://jsfiddle.net/FjNy5/2/

我建议您使用on（），如文档let它做到了：

And i recommend you to use on() like documentation let it do:

$(".cause_button").on({
    'mouseenter': function(){
        $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
    }, 
    'mouseleave': function(){
        $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
    }
});

在此处检查： http://jsfiddle.net/ETu3A/

这篇关于更改jQuery宽度/高度动画的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！