從右上角開始增加div？

我有一個需要互動的元素網格。當其中一個div被點擊時，它會變得更大。對於大多數元素「成長」，從右下角一個div是可以接受的：從右上角開始增加div？

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

然而，也有一些情況，其中從右下方不會與應用程序的其餘作品「成長」。例如，我可能需要從右上角開始增長。有任何想法嗎？我喜歡將動畫製作的簡單性轉換爲新的寬度/高度，但我不確定它是否可以達到除了從右下角拖動之外的效果。

感謝提前:)

來源

2013-02-01 ahammond

使用絕對定位，操縱'頂部，左側，寬度，高度'屬性。沒有簡單的方法 – Peter

但是，這種平滑的過渡（就像你從拐角處抓住一扇窗戶）不會在那裏，對嗎？你認爲有什麼辦法來保持流體動畫？ – ahammond

會有相同的轉變。 [查看關鍵詞「easing」]（http://api.jquery.com/animate/） – Peter

有幾個方法，你可以做到這一點，無論是與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-01 20:39:28 gotohales

這太好了！感謝您提供快速簡單的解決方案:) – ahammond

我實現了一個詳細的功能的客戶端，很容易把你想要的任何內容..

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-01 22:17:11 Guilherme

從右上角開始增加div？

回答

相關問題