Question

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

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

然而，在某些情况下，＆＃34;成长＆＃34;从右下角开始，我们无法使用其他应用程序。

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

提前致谢：）

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

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

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

从右上角增长div？

2 个答案: