4

インタラクティブにする必要がある要素のグリッドがあります。div の 1 つをクリックすると、サイズが大きくなります。ほとんどの要素では、右下隅から div を「成長」させることができます。

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

ただし、右下からの「成長」がアプリケーションの残りの部分で機能しない場合があります。

たとえば、右上から成長する必要があるかもしれません。何か案は？新しい幅/高さにアニメーション化するシンプルさが気に入っていますが、右下隅からドラッグする以外の効果が得られるかどうかはわかりません。

前もって感謝します ：）

4

2 に答える 2

2

あなたがそれを行うことができるいくつかの方法があります、あなたが言及したように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でおもちゃにする例です

あなたがそれをあなたが望むように正確に得るまで、多くの緩和特性と微調整することがあります。

于 2013-02-01T20:39:28.007 に答える
0

どんな内容でも入れやすいクライアント向けの細かい機能を実装しました..

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のサイズに注意してください。

于 2013-02-01T22:17:11.243 に答える