kpis de eskape

by ManuJT

HTML

<div id=boton>
 <p>
   Click
 </p>
</div>
<div class="kpi-cliente gris">              
  <div class="container">                
    <div id="Kpis-Dinamico-cliente" class="row">
            <div class="kpi-card">
            <div class="kpi-card-img">
                <img src="/Imagenes/Cliente/Logo_CPSL.png">
            </div>
            <p><button></button></p>

            <h1>CPS viejoL</h1>
            
        </div>
            <div id="kpi-tipo-4" class="kpi-item kpi-flawless">
                <div class="kpi-header">
                    <h3>Incidencias </h3>
                    <p>Todas las abiertas (hoy) </p>
                </div>
                <div class="kpi-1-body">
                    <p class="kpi-4-label"> Pendientes</p>
                    <p class="kpi-4-text red"> &nbsp;&nbsp;0</p>

                    <p class="kpi-4-details-label1"> En espera </p>
                    <p class="kpi-4-details-val1 ">  &nbsp;&nbsp;0</p>

                    <p class="kpi-4-details-label2">  Resueltas </p>
                    <p class="kpi-4-details-val2 "> &nbsp;&nbsp;0 </p>

                    <p class="kpi-4-details-label3">  Total </p>
                    <p class="kpi-4-details-val3 "> &nbsp;&nbsp;0 </p>

                    <p class="kpi-4-details-label4">  Seguimientos </p>
                    <p class="kpi-4-details-val4 "> &nbsp;&nbsp;0 </p>

                    <p class="kpi-4-details-label5">  Tareas </p>
                    <p class="kpi-4-details-val5 "> &nbsp;&nbsp;0 </p>

                    <p class="kpi-4-details-label6">  Costes </p>
                    <p class="kpi-4-details-val6 "> 0 minutos </p>

                    <p class="kpi-4-details-label7"> Hoy </p>
                    <p class="kpi-4-details-val7 red">  (&nbsp;&nbsp;0)</p>

                    <p class="kpi-4-details-label8">  En espera </p>
                    <p class="kpi-4-details-val8 "> (&nbsp;&nbsp;0) </p>

                    <p class="kpi-4-details-label9">  Resueltas...

CSS

body {
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
}

#boton {
  border: 1px solid black;
  width:125px;  
}

.kpi-cliente {    
    padding: 3px;      
    /*height: 260px;*/
    overflow: hidden;
    border: 1px solid green;  
    margin: px;
}


.row {
  /*min-width: 800px;*/
  position: relative;
  left: 0px;
  overflow: hidden;  
  border: 1px solid black;  
  margin: 5px;
 }

.container{
  overflow: hidden;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  margin 5px;
  
}

.kpi-usuario {    
    padding: 3px;
    height: 250px;   
}

.kpi-general {    
    padding: 3px;      
    height: 250px;
}






.kpi-salto {
    clear: both;
    margin: 2px;
}


.kpi-item,
.kpi-item * {
    box-sizing: border-box;
}

.kpi-item {
  float: left;
  width: 250px;
  height: 250px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  overflow: hidden;
}

.kpi-header {
  position: relative;
  height: 60px;
  padding: 10px;
  background-color: #fff;
}

.kpi-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
}

.kpi-header p {
  position: absolute;
  color: #666;
  font-size: 14px;
  margin: 0;
  left: 10px;
  bottom: 8px;
}

.kpi-growth .kpi-header {
  border-bottom: 3px solid #0A58A4;
}

.kpi-growth > .kpi-header {
 background-color: #E6EEF6;
}

.kpi-growth h3,
.kpi-growth .value {
  color: #0A58A4;
}

.kpi-flawless .kpi-header {
  border-bottom: 3px solid #BC1A40;
}

.kpi-flawless > .kpi-header {
 background-color: #F8E8EC;
}

.kpi-flawless h3,
.kpi-flawless .value {
  color: #BC1A40;
}

.kpi-people .kpi-header {
  border-bottom: 3px solid #198D69;
}

.kpi-people > .kpi-header {
 background-color: #E8F4F0;
}

.kpi-people h3,
.kpi-people .value {
  color: #198D69;
}


/* KPI-1 Llamadas */

.kpi-1-body {
  position: relative;
  height: 185px;
  background-color: #fff;
}

.kpi-1-body .kpi-1-text {
  margin: 0;
  position: absolute; 
  font-size: 85px;
  line-height: 160px;
  text-align: center;
 ...

JavaScript

$( document ).ready(function() {
	
    $("#boton").click(function() {	
       var $first = $("#Kpis-Dinamico-cliente");
       var $second = $("#Kpis-Dinamico-cliente-nuevo");            
       animateLeft($first, $second);
      
      //$( "#Kpis-Dinamico-cliente-nuevo").animate({left: "0"}, 1500)
    });

		function animateLeft($src, $tgt) {    				            
            var width = $src.parent().width();           
            $src.hide(); 
            $tgt.css({ left: width});                                   
            $tgt.show(); 
            $tgt.animate({left: "0"}, 1500)
             
            //$tgt.css({ display: block});             
            //$tgt.css({ left: width});                                   
        }
});