我有一个需要交互的元素网格。当其中一个 div 被点击时,它会变大。对于大多数元素来说,从右下角“生长”一个 div 是可以接受的:
$(.my-div).animate({ width: "379px", height: "204px" });
但是,在某些情况下,从右下角“增长”无法与应用程序的其余部分一起使用。
例如,我可能需要从右上角开始增长。有任何想法吗?我喜欢动画到新的宽度/高度的简单性,但我不确定它是否可以实现除了从右下角拖动之外的效果。
提前致谢 :)
有几种方法可以做到这一点,可以使用您提到的 jQuery 动画,也可以使用 CSS 过渡。它们看起来像
.child.clicked {
height: 100px;
width: 300px;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s;
-o-transition: width 2s, height 2s;
}
or
$('.child2').click(function() {
$(this).animate({
width: ['300px', 'swing'],
height: ['100px', 'swing']
}, { duration: "slow", easing: "easein" });
});
这是一个可以玩的例子http://jsbin.com/uxicil/1/edit http://jsbin.com/uxicil/1/edit
有许多缓动属性和需要调整的东西,直到您完全按照您想要的方式进行操作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)