动画从远角的宽度/高度

Question

我有一个6块的网格。当点击每个块时，块扩展并覆盖容纳块的容器。

第一个盒子（左上角）看起来很好，但其他人没有看到块长到容器宽度和高度的错觉，因为它从左上角开始。

理想情况下，盒子2和盒子5应从其中心展开，盒子1,3,4和6应从其远端的角落展开。这是可能的和如何？

我已经created a JSFiddle显示我的问题。但对于重现代码是在这里：

JQuery的

$(".service-block").on("click", "a", function (e) { 
    e.preventDefault(); 

    var block = $(this); 
    var blockOffset = block.offset(); 
    var blockBackgroundColor = block.css("backgroundColor"); 

    var container = $(".service-grid"); 
    var containerOffset = container.offset(); 

    // Create the popup and append it to the container 
    var popout = $("<div class='service-block-popup'>Test</div>"); 
    popout.css({ 
     "backgroundColor": blockBackgroundColor, 
     "position": "absolute", 
     "top": blockOffset.top, 
     "left": blockOffset.left 
    }).appendTo(container) 

    // Now animate the properties 
    .animate({ 
     "height": container.height() + "px", 
     "width": container.width() + "px", 
     "top": containerOffset.top, 
     "left": containerOffset.left 
    }, 1500, function() { 
     //alert("done"); 
    }) 

    .on("click", function() { 
     popout.remove(); 
    }); 

}); 

标记

<div class="service-grid"> 
    <div class="row"> 
     <div class="service-block"> 
      <a href="#" class="box1"> 
       <span class="title">Box 1</span> 
      </a> 
     </div> 
     <div class="service-block"> 
      <a href="#" class="box2"> 
       <span class="title">Box 2</span> 
      </a> 
     </div> 
     <div class="service-block"> 
      <a href="#" class="box3"> 
       <span class="title">Box 3</span> 
      </a> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="service-block"> 
      <a href="#" class="box4"> 
       <span class="title">Box 4</span> 
      </a> 
     </div> 
     <div class="service-block"> 
      <a href="#" class="box5"> 
       <span class="title">Box 5</span> 
      </a> 
     </div> 
     <div class="service-block"> 
      <a href="#" class="box6"> 
       <span class="title">Box 6</span> 
      </a> 
     </div> 
    </div> 
</div> 

CSS

*, *::after, *::before { 
    box-sizing: border-box; 
} 

.service-grid { width: 600px; } 
.row { 
    overflow: hidden; 
} 

.service-grid .service-block a { 
    display: block; 
    height: 200px; 
    width: 200px; 
    text-align: center; 
    float: left; 
} 
.service-grid .service-block a > img { 
    display: block; 
    margin: 0 auto; 
    transition: all 100ms linear 0s; 
} 
.service-grid .service-block a > .title { 
    display: block; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 2.2rem; 
    font-weight: bold; 
    line-height: 3.2rem; 
    margin-top: 20px; 
    text-transform: uppercase; 
} 

.box1 { background: red; } 
.box2 { background: purple; } 
.box3 { background: yellow; } 
.box4 { background: orange; } 
.box5 { background: green; } 
.box6 { background: magenta; } 

Answer 1

我要回答我的问题我自己。这是一个简单的错误！

我没有在.service-block-popup上设置宽度/高度。所以它没有从目前的状态扩大。这是应该如何来构建：

// Create the popup and append it to the container 
var popout = $("<div class='service-block-popup'>Test</div>"); 
popout.css({ 
    "backgroundColor": blockBackgroundColor, 
    "position": "absolute", 
    "top": blockOffset.top, 
    "left": blockOffset.left, 
    "width": block.outerWidth(), 
    "height": block.outerHeight() 
}).appendTo(container) 
/* .... */ 

在这里，在行动：http://jsfiddle.net/hdq0x2s8/4/

Answer 2

希望这个代码将会对您有用，我只是增加了几行的代码。查找小提琴here

$(".service-block").on("click", "a", function (e) { 
 
     e.preventDefault(); 
 

 
     var block = $(this); 
 
     var blockOffset = block.offset(); 
 
     var blockBackgroundColor = block.css("backgroundColor"); 
 

 
     var container = $(".service-grid"); 
 
     var containerOffset = container.offset(); 
 

 
     // Create the popup and append it to the container 
 
     var popout = $("<div class='service-block-popup'>Test</div>"); 
 
    
 
    \t thisHeight = $(this).height(); 
 
     thisWidth = $(this).height(); 
 
    \t var clsName = $(this).attr('class'); 
 
    
 
    \t var topEle = ["box1", "box2", "box3"]; 
 
     if ($.inArray(clsName, topEle) > -1) 
 
     { 
 
      thisHeight = 0; 
 
     } 
 
    
 
    \t var leftEle = ["box1", "box4"]; 
 
    \t if ($.inArray(clsName, leftEle) > -1) 
 
     { 
 
      thisWidth = 0; 
 
     } 
 
     var midEle = ["box2", "box5"]; 
 
     if ($.inArray(clsName, midEle) > -1) 
 
     { 
 
      thisWidth = thisWidth/2; 
 
     } 
 
    
 
     popout.css({ 
 
      "backgroundColor": blockBackgroundColor, 
 
      "position": "absolute", 
 
      "top": blockOffset.top + thisHeight, 
 
      "left": blockOffset.left + thisWidth 
 
     }).appendTo(container) 
 

 
     // Now animate the properties 
 
     .animate({ 
 
      "height": container.height() + "px", 
 
      "width": container.width() + "px", 
 
      "top": containerOffset.top, 
 
      "left": containerOffset.left 
 
     }, 1500, function() { 
 
      //alert("done"); 
 
     }) 
 

 
     .on("click", function() { 
 
      popout.remove(); 
 
     }); 
 

 
    });

*, *::after, *::before { 
 
    box-sizing: border-box; 
 
} 
 

 
.service-grid { width: 600px; } 
 
.row { 
 
    overflow: hidden; 
 
} 
 

 
.service-grid .service-block a { 
 
    display: block; 
 
    height: 200px; 
 
    width: 200px; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
.service-grid .service-block a > img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    transition: all 100ms linear 0s; 
 
} 
 
.service-grid .service-block a > .title { 
 
    display: block; 
 
    font-family: Arial,Helvetica,sans-serif; 
 
    font-size: 2.2rem; 
 
    font-weight: bold; 
 
    line-height: 3.2rem; 
 
    margin-top: 20px; 
 
    text-transform: uppercase; 
 
} 
 

 
.box1 { background: red; } 
 
.box2 { background: purple; } 
 
.box3 { background: yellow; } 
 
.box4 { background: orange; } 
 
.box5 { background: green; } 
 
.box6 { background: magenta; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="service-grid"> 
 
    <div class="row"> 
 
     <div class="service-block"> 
 
      <a href="#" class="box1"> 
 
       <span class="title">Box 1</span> 
 
      </a> 
 
     </div> 
 
     <div class="service-block"> 
 
      <a href="#" class="box2"> 
 
       <span class="title">Box 2</span> 
 
      </a> 
 
     </div> 
 
     <div class="service-block"> 
 
      <a href="#" class="box3"> 
 
       <span class="title">Box 3</span> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="service-block"> 
 
      <a href="#" class="box4"> 
 
       <span class="title">Box 4</span> 
 
      </a> 
 
     </div> 
 
     <div class="service-block"> 
 
      <a href="#" class="box5"> 
 
       <span class="title">Box 5</span> 
 
      </a> 
 
     </div> 
 
     <div class="service-block"> 
 
      <a href="#" class="box6"> 
 
       <span class="title">Box 6</span> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

试试这个代码 我有一些改变CSS & JS

$(".service-block").on("click", "a", function (e) { 
     e.preventDefault(); 
     var block = $(this); 
     var blockOffset = block.offset(); 
     var blockBackgroundColor = block.css("backgroundColor"); 

     var container = $(".service-grid"); 
     var containerOffset = container.offset(); 

     // Create the popup and append it to the container 
     var popout = $("<div class='service-block-popup'>Test</div>"); 
     popout.css({ 

      "backgroundColor": blockBackgroundColor, 
      "position": "absolute", 
      "left": "50%", 
      "top": "50%", 
     }).appendTo(container) 

     // Now animate the properties 
     .animate({ 
      "height": container.height() + "px", 
      "width": container.width() + "px", 
      "top": containerOffset.top, 
      "left": containerOffset.left 
     }, 1500, function() { 
      //alert("done"); 
     }) 

     .on("click", function() { 
      popout.remove(); 
     }); 

    }); 

演示链接http://jsfiddle.net/hdq0x2s8/3/

Answer 4

我基于容器盒的宽度/高度的宽度/高度生成的动态顶部和左侧。根据容器和盒子的大小，它将决定盒子的位置，无论是在角落还是在中心，然后决定顶部和左侧。

这里是js代码：

$(".service-block").on("click", "a", function (e) { 
    e.preventDefault(); 

    var block = $(this); 
    var blockOffset = block.offset(); 
    var blockBackgroundColor = block.css("backgroundColor"); 

    var container = $(".service-grid"); 
    var containerOffset = container.offset(); 
    var top = 0; 
    var left = 0; 

    if (blockOffset.top - containerOffset.top == 0 && blockOffset.left - containerOffset.left == 0) { 
     top = blockOffset.top; 
     left = blockOffset.left; 
    } else if (blockOffset.top - containerOffset.top == 0 && blockOffset.left - containerOffset.left + block.width() == container.width()) { 
     top = blockOffset.top; 
     left = container.width() - containerOffset.left; 
    } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left == 0) { 
     top = container.height() - containerOffset.top; 
     left = containerOffset.left; 
    } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left + block.width() == container.width()) { 
     top = container.height() - containerOffset.top; 
     left = container.width() - containerOffset.left; 
    } else { 
     top = blockOffset.top + (block.width()/2); 
     left = blockOffset.left + (block.height()/2); 
    } 

    // Create the popup and append it to the container 
    var popout = $("<div class='service-block-popup'>Test</div>"); 
    popout.css({ 
     "backgroundColor": blockBackgroundColor, 
     "position": "absolute", 
     "top": top, 
     "left": left 
    }).appendTo(container) 

    // Now animate the properties 
    .animate({ 
     "height": container.height() + "px", 
     "width": container.width() + "px", 
     "top": containerOffset.top, 
     "left": containerOffset.left 
    }, 1500, function() { 
     //alert("done"); 
    }) 

    .on("click", function() { 
     popout.remove(); 
    }); 

}); 

这里是fiddle。

它将工作超过6盒。