Animiere die Breite/Höhe von den fernen Ecken

Ich habe ein Raster von 6 Blöcken. Wenn Sie auf jeden der Blöcke klicken, wird der Block erweitert und bedeckt den Container mit den Blöcken.Animiere die Breite/Höhe von den fernen Ecken

Die erste Box (oben links) sieht gut aus, aber die anderen versäumen die Illusion, dass der Block auf die Containerbreite und -höhe wächst, weil er von ihrer oberen linken Position aus beginnt.

Idealerweise sollten Box 2 und 5 von ihrer Mitte aus expandieren und Box 1, 3, 4 und 6 sollten sich von ihren fernen Ecken aus erweitern. Ist das möglich und wie?

Ich habe created a JSFiddle, die mein Problem zeigt. Aber der Code für reproduce ist hier:

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(); 
    }); 

});

Markup

<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; }

Quelle

2015-10-23 janhartmann

Sie haben nur 6 Boxen? oder die Anzahl der Boxen kann erhöht werden? –

Im Moment nur 6 - es könnte sich erhöhen, ich möchte es in Betracht ziehen kann es erhöhen. – janhartmann

Ich werde meine Frage selbst beantworten. Das war ein einfacher Fehler!

Ich habe die Breite/Höhe auf .service-block-popup nicht festgelegt. So hat es sich von seinem gegenwärtigen Zustand nicht ausgedehnt. Dies ist, wie sollte es aufgebaut sein:

// 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) 
/* .... */

hier in Aktion: http://jsfiddle.net/hdq0x2s8/4/

Quelle

2015-10-23 07:59:02 janhartmann

Hoffnung dieser Code wird für Sie nützlich, habe ich nur noch ein paar Linie von Code. Finden Geige 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>

Quelle

2015-10-23 06:59:52 Sachink

Während dies funktioniert (irgendwie - die Box expandiert von außerhalb des Containers) würde ich einen Ansatz bevorzugen, bei dem es nicht auf Klassen basiert. Meine Boxen sind dynamisch, so dass ich die Klassen nicht kontrollieren kann. – janhartmann

Okay, ich dachte, die 'div'-Position ist entsprechend mit den von Ihnen erstellten CSS-Klassen für Farben festgelegt.Sie müssen sich also extra anstrengen, um die Position des ausgewählten 'div' zu erhalten. :( – Sachink

Probieren Sie diesen Code Ich habe einige Veränderungen 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(); 
     }); 

    });

Demo Link-http://jsfiddle.net/hdq0x2s8/3/

Quelle

2015-10-23 07:22:54

Ich wollte wirklich die Illusion, dass die Box von seiner Position aus erweitert und nicht in die Mitte kommt :-) – janhartmann

sieht gut aus mit dem völlig anderen Ansatz. – Sachink

Ich habe dynamische oben und links erzeugt basierend auf Breite/Höhe des Behälters und Breite/Höhe der Box. Basierend auf der Größe des Containers und der Box bestimmt er die Position der Box, ob in der Ecke oder in der Mitte und entscheidet dann oben und links.

Hier js Code:

$(".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(); 
    }); 

});

Hier ist fiddle.

Es funktioniert für mehr als 6 Boxen.

Quelle

2015-10-23 08:22:53

Animiere die Breite/Höhe von den fernen Ecken

Antwort

Verwandte Themen