JQuery borde animado sin mover div

Question

Quiero animar un div haciendo primero su borde más grueso por 5px en mouseenter, luego disminuyendo el borde por 5px en mouseleave, la parte difícil es que no quiero que el div se vea como se está moviendo (si solo se animan los bordes, todo el div se verá como se desplaza, no solo el borde cada vez más grueso/delgado). Estoy muy cerca, pero estoy atascado en la última parte: mouseleave. Lo que tengo hasta ahora es:

$("#thumbdiv<%=s.id.to_s%>").bind({ 
      mouseenter: function(){ 
       $(this).animate({ 
        borderRightWidth: "25px", 
        borderTopWidth: "25px", 
        borderLeftWidth: "25px", 
        borderBottomWidth: "25px", 

        margin: "-5px" 
       }, 500); 
      }, 
      mouseleave: function(){ 

       $(this).animate({ 
        borderRightWidth: "20px", 
        borderTopWidth: "20px", 
        borderLeftWidth: "20px", 
        borderBottomWidth: "20px", 

        margin: "0px" 
       }, 500); 
      } 
     }); 

puse la frontera para ser 20 píxeles en algún lugar antes de esto, y el margen no está definida, por lo que es 0px. El div se anima muy bien en mouseenter, puedo hacer que el borde sea más grueso sin que el div se mueva fuera de lugar, pero cuando se desencadena el mouseleave, el div primero se reubicará a la posición como si el "margen -5px" nunca se llamara , y luego disminuir su borde lentamente y parece que el "magin: '0px'" no se está llamando realmente.

No estoy seguro si mi descripción tiene sentido, puedo poner un prototipo si es necesario.

Answer 1

Así que finalmente encontró mi propia respuesta. Para reiterar lo que quería:

1. divs circulares
2. Animación de aumentar Ancho del borde
3. no desea que el div que parezca que está "moviendo", solamente las fronteras deben ser las partes móviles

Lo conseguí animando AMBOS el margen y el borde al mismo tiempo, porque si solo se anima el borde, entonces todo el div se desplazará. Pero si reduces el margen al mismo tiempo que aumentas el borde, obtienes la ilusión de que el div está quieto.

Simplemente, tenemos un div circular:

#somediv { 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
    border: solid 0px; 
    vertical-align: middle; 
    border-radius: 2000px; 
    background-color: #ccc; 
    margin: 0px; 
} 

Y con una función jQuery como:

$(function(){ 
    $("#somediv").mouseover(function(){ 
    $(this).animate({"borderLeftWidth" : "5px", 
        "borderRightWidth" : "5px", 
        "borderTopWidth" : "5px", 
        "borderBottomWidth" : "5px", 

        "marginLeft" : "-5px", 
        "marginTop" : "-5px", 
        "marginRight" : "-5px", 
        "marginBottom" : "-5px" 
        }, 300); 
    }).mouseout(function(){ 
     $(this).animate({"borderLeftWidth" : "0px", 
         "borderRightWidth" : "0px", 
         "borderTopWidth" : "0px", 
         "borderBottomWidth" : "0px", 

         "marginLeft" : "0px", 
         "marginTop" : "0px", 
         "marginRight" : "0px", 
         "marginBottom" : "0px" 
         }, 300); 
    }); 
}); 

Nos puede lograr lo que queremos.

Consulte this fidddle como ejemplo.

Ahora, otra pregunta para debatir es: queremos ser solo capaces de animar el borde cuando el mouse está realmente sobre el elemento circular dentro del div, porque si se desplaza sobre las esquinas de la casilla div invisible, el círculo animará, pero eso no es lo que queremos. Voy a publicar un enlace a cómo podemos lograr esto más adelante.

Answer 2

tema interesante ... Funciona mejor al cambiar las clases, pero todavía no es muy suave:

http://jsfiddle.net/dzTHB/13/

Answer 3

no he leído todo el código, pero creo que hay una mejor aproach hacer Lo que quieras.

Es la propiedad "outline" css.

Como dice la especificación: "... no influye en la posición o el tamaño de la caja ... ... no causa reflujo o desbordamiento ..."

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

El código sería algo como esto:

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter(function() { 
jQuery(this).css("outlineStyle", "solid").animate({ 
    'outlineWidth': '5px' 
}, 500); 
}).mouseout(function() { 
jQuery(this).animate({ 
    'outlineWidth': '0px' 
}, 500).css("outlineStyle", "solid"); 
}); 

Nota:

OK, lo editó la @Nabab "violín" (yo no sabía acerca de ese servicio) y me dieron esto: http://jsfiddle.net/EbTms/ ... Creo que funciona.

Answer 4

Bien, esto se convirtió en un desafío.

Tener en cuenta que su divs son circulares:

Utilice una envoltura (otro div) para cada uno de sus divs, más grande que ellos, centrar su divs en las envolturas (vertical y horizontal) como "inline- bloquear "y luego animarlos.

Cada borde debe ser animado independientemente para que funcione bien ("borderLeftWidth", "borderRightWidth", etc. en lugar de solo "borderWidth"). Es un error no muy bien documentado en jQuery: http://bugs.jquery.com/ticket/7085 (era difícil de descubrir).

Parece trabajo: http://jsfiddle.net/y4FTf/2/

HTML

<div class="wrapper"> 
<div class="content">Hello World! 
</div> 
</div> 
<div class="wrapper"> 
<div class="content">Foo Bar 
</div> 
</div> 

CSS

.wrapper { 
width: 210px; 
height: 210px; 
line-height: 210px; 
text-align: center; 
padding: 0px; 
} 
.content { 
display: inline-block; 
height: 200px; 
width: 200px; 
border: solid 0px; 
vertical-align: middle; 
border-radius: 2000px; 
background-color: #ccc; 
margin: 0px; 
} 

Javascript

$(function(){ 
$(".content").mouseover(function(){ 
    $(this).animate({"borderLeftWidth" : "5px", 
        "borderRightWidth" : "5px", 
        "borderTopWidth" : "5px", 
        "borderBottomWidth" : "5px" 
        }, 300); 
}).mouseout(function(){ 
     $(this).animate({"borderLeftWidth" : "0px", 
         "borderRightWidth" : "0px", 
         "borderTopWidth" : "0px", 
         "borderBottomWidth" : "0px" 
         }, 300); 
}); 
});