从右上角增长div？

我有一个需要互动的元素网格。 单击其中一个div时，它将增大到更大的大小。 对于大多数元素“增长”，可以接受右下角的div：

$(.my-div).animate({ width: "379px", height: "204px" }); 

但是，在某些情况下，从右下角“增长”将无法与其他应用程序一起使用。

例如，我可能需要从右上角成长。 有任何想法吗？ 我喜欢将动画设置为新的宽度/高度的简单性，但我不确定它是否可以实现除了从右下角拖动之外的效果。

提前致谢 ：）

Answer 1

你可以通过几种方式来实现它，或者像你提到的那样使用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; } 

要么

  $('.child2').click(function() { $(this).animate({ width: ['300px', 'swing'], height: ['100px', 'swing'] }, { duration: "slow", easing: "easein" }); }); 

以下是http://jsbin.com/uxicil/1/edit玩具的示例

有许多缓动属性和要调整的东西，直到你得到它想要的方式。

Answer 2

我为客户端实现了一个详细的function，很容易放入你想要的任何内容。

http://jsfiddle.net/gschutz/393Cb/1/

 function increase(event){ $this = $(event.target); if( $(".bigger").length > 0 ) decrease($(".bigger")); $fixed_corner = $this.attr("rel").split(":"); if( !$this.hasClass("bigger") ){ $new = $this.clone(); $new.insertAfter($this); $new.css("position", "absolute").addClass("bigger"); var offset = $this.position(), w = $this.outerWidth(true), h = $this.outerHeight(true); if( $fixed_corner[0] == "top" ) $new.css("top", offset.top); else $new.css("bottom", offset.top-h); if( $fixed_corner[1] == "left" ) $new.css("left", offset.left); else $new.css("right", offset.left-w); $new.animate({width: "+=50", height: "+=30", backgroundColor: "#eee"}); console.log($fixed_corner); } else { decrease($this); } } function decrease($this){ $this.animate({width: "-=50", height: "-=30", backgroundColor: "#aaa"}, 300, function(){$(this).remove();}); } 

您可以添加其他方法来调整对象的大小。
只是要小心div的大小。