jquery - 从右上角增长div？

Question

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

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

但是，在某些情况下，右下角的“增长”不适用于应用程序的其余部分。

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

提前致谢 ：）

Answer 1

有几种方法可以做到这一点，或者像你提到的那样使用 jQuery animate，或者使用 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

我为客户端实现了一个详细的功能，可以轻松放入您想要的任何内容..

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 的大小。