从右上角成长div? [英] Grow div from top right corner?
问题描述
我有一个需要互动的元素网格。当其中一个div被点击时,它将增长到更大的大小。对于大多数元素,从右下角生长一个div是可以接受的:
I have a grid of elements that need to be interactive. When one of the divs is clicked, it will grow to a larger size. For most elements "growing" a div from the bottom right corner is acceptable:
$(.my-div).animate({ width: "379px", height: "204px" });
但是,在某些情况下,从右下角的生长其余的应用程序。
However, there are some cases in which "growing" from the bottom right won't work with the rest of the application.
例如,我可能需要从右上方增长。有任何想法吗?我喜欢简单的动画到一个新的宽度/高度,但我不知道它是否可以实现除了从右下角拖动效果。
I may need to grow from the top-right, for example. Any ideas? I like the simplicity of animating to a new width/height, but I'm not sure if it can achieve an effect other than dragging from the bottom-right corner.
提前感谢:)
推荐答案
有几种方法可以做到,无论是使用jQuery动画,转换。他们会像
There are a couple ways you could do it, either with jQuery animate like you mentioned, or CSS transitions. They would look something like
.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;
}
或
$('.child2').click(function() {
$(this).animate({
width: ['300px', 'swing'],
height: ['100px', 'swing']
}, { duration: "slow", easing: "easein" });
});
这里是一个玩具 http://jsbin.com/uxicil/1/edit
有许多缓动属性和事情调整,直到你得到它完全如何你想要的。
There are a number of easing properties and things to tweak until you get it exactly how you want.
这篇关于从右上角成长div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!