是否可以为缩放 CSS 属性设置动画

发布于 2024-12-14 05:08:19 字数 140 浏览 2 评论 0原文

是否可以设置缩放动画的动画

我已经尝试过，但它与使用 css 属性来设置它是一样的。

$(this).animate({
    zoom: 0.5
}, 500);

高度动画工作等

原文

Is it possible to animate the zoom animation

I've tried this but it is just the same as using the css property to set it.

$(this).animate({
    zoom: 0.5
}, 500);

Height animations work etc

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执手闯天涯 2024-12-21 05:08:19

试试这个：

-moz-transform: scale(2); 
-webkit-transform: scale(2);
-o-transform: scale(2);

**，但目前您无法使用基本的 jQuery 为它们设置动画。

但是，您可以使用 jQuery 插件来实现此目的，例如 jquery.transform.js。

请注意 IE9 也支持转换属性，我在 this SO 中找到了一些有关它的信息问题。**

Try this :

-moz-transform: scale(2); 
-webkit-transform: scale(2);
-o-transform: scale(2);

**, but currently you cannot animate them with basic jQuery.

However, you can use a jQuery plugin for that, like jquery.transform.js.

Please note the IE9 also supports the transform property, I found some info about it in this SO question.**

回复收藏 0 原文

苏大泽ㄣ 2024-12-21 05:08:19

你甚至可以用 jQuery 这样做：

jQuery(this).hover(function() {
        jQuery(this).animate({
                marginTop: '-10px', //Bring image to top a little bit
                marginLeft: '-10px',
                width: '30px', //Zoom by 30 px
                height: '30px' 
            }, 500); /* 500 is the speed of how fast/slow image animates */

        } , function() {
        jQuery(this).animate({
                width: '15px', //Bring image back to original size
                height: '15px'
            }, 500);
    });

You can even do in this way with jQuery :

jQuery(this).hover(function() {
        jQuery(this).animate({
                marginTop: '-10px', //Bring image to top a little bit
                marginLeft: '-10px',
                width: '30px', //Zoom by 30 px
                height: '30px' 
            }, 500); /* 500 is the speed of how fast/slow image animates */

        } , function() {
        jQuery(this).animate({
                width: '15px', //Bring image back to original size
                height: '15px'
            }, 500);
    });

回复收藏 0 原文

~没有更多了~