Jquery可点击调整动画大小。最大限度地分散别人 [英] Jquery clickable resize animation. Maximizing div over others

问题描述

我无法想出解决方案来解决我的问题。
所以我有一个很酷的想法，使看起来很花哨的用户面板，但无法弄清楚如何
使jquery工作正确;）。这是事情：

  html：
< div id =content> 
< div id =containerleft> 
< div id =box1class =box>< / div> 
< div id =box2class =box>< / div> 
< div id =box3class =box>< / div> 
< div id =box4class =box>< / div> 
< div id =box5class =box>< / div> 
< div id =box6class =box>< / div> 
< / div> 
< / div> 
 $ b JS：
 $（。box）。click（function（）{
 $（this）.css（{'position'：'absolute'}）。 animate（{
 width：'100％'，
 height：'100％'}，300）; 
}）; 
  

以下是它如何使用css：
http://jsfiddle.net/85mJN/1/

我是什么试图实现的目标是将div从他的位置调整到父母div的大小，我会调用越来越大的效果。
正如你所看到的，在.click div移动到左上角之后，然后它对其父亲的引用，以及通过移动其他人而引发的整个事情。我试图用动画div来处理.css（'z-index'：'999'），但这是一个小姐。主要目标是将div从原始位置扩展到其他div的上方，而不移动它们。

〜sandman

解决方案

  $（。box）。click（function（）{
 
 var clone = $（this）.clone（）。addClass（'active'）; 
 var parent = $ （this）.parent（）; 
 var pos = $（this）.position（）; 
 $ b $（this）.append（clone）; 
 
 clone.css（{'position'：'absolute'，left：pos.left +'px'，top：pos.top +'px'}）。animate（{
 width：'100％'，
高度：'100％'，
 top：0，
：0 
}，300）; 
 
 
}）; 
  

http://jsfiddle.net/85mJN/3/

请注意，您的box元素应该有静态位置，所以附加框的绝对位置将会从容器中包装。

更新：

p>

http://jsfiddle.net/85mJN/4/

另外，我仍然认为使用toggleClass使用CSS3转换的最佳方式。它需要更少的代码，它非常安全并且在硬件加速时使用复杂的div时更加平滑。我不会担心较旧的浏览器，它们不会动画，但会显示大框......

I can't come up with solution to my problem. So I've got cool idea to make fancy looking user panel but can't figure out how to make jquery work right ;). Here's the thing:

html:
<div id="content">
<div id="containerleft">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
</div>
</div>

JS:
$(".box").click(function(){
$(this).css({'position' : 'absolute'}).animate({
                width: '100%', 
                height : '100%'},300);
                          });

Here is how it work with css: http://jsfiddle.net/85mJN/1/

What I'm trying to achieve is resize div from his position, to size of parent div, growing effect I would call. As you can see, after .click div is moving to the left top corner, and then its fiting to parent, also its ruing whole thing by moving other guys. I've tried to mess around with .css('z-index': '999') for animated div, but that was a miss. Main goal is to expand div from his original position, above other div's, without moving them.

~ sandman

解决方案

$(".box").click(function(){

    var clone = $(this).clone().addClass('active');
    var parent = $(this).parent();
    var pos = $(this).position();

    $(this).append(clone);

    clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
        width: '100%', 
        height : '100%',
        top: 0,
        left: 0
    },300);


});

http://jsfiddle.net/85mJN/3/

Note that your box element should have static position so the appended box absolute position will be wrapped from the container.

UPDATE:

Added close on click while a box is active.

http://jsfiddle.net/85mJN/4/

ALSO i still think the best way to use CSS3 transition with toggleClass. It requires less code, it's much failsafe and it's smoother when your using complex divs as it's hardware accelerated. I would not worry about older browser, they won't animate but show the big box...

这篇关于Jquery可点击调整动画大小。最大限度地分散别人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！