¿Ampliando imágenes desde el centro en porcentaje?

For a website using jQuery, there are graphics on a page that, when clicked on, bring up information in another section of the site. When moused over, the images expand by a percentage from their centre. The issue is that when you mouse in and out quickly (before the animation completes) the images do not resize correctly. (They get smaller.)

    $(".locationimg").hover(
        function(){
            var height = $(this).height()
            var width = $(this).width()
            var top = $(this).position().top
            var left = $(this).position().left
            $(this).stop().animate({
                height: height*1.1 + 'px',
                width: width*1.1 + 'px',
                top: top - (((height*1.1)-height)/2) + 'px',
                left: left - (((width*1.1)-width)/2) + 'px'
            });
        },
        function(){
            var height = $(this).height()
            var width = $(this).width()
            var top = $(this).position().top
            var left = $(this).position().left
            var height1 = height/1.1
            var width1 = width/1.1
            $(this).stop().animate({
                height: height1 + 'px',
                width: width1 + 'px',
                top: top - (((height1)-height)/2) + 'px',
                left: left - (((width1)-width)/2) + 'px'
            });
        }
    );

If the variables could be defined before going into the .hover(), this would be easy because resizing the image would simply be 'height: height' and so on. The problem with this is that there are several images that all need to do this, so the variables need to be defined within .hover().

preguntado el 30 de enero de 12 a las 19:01

2 Respuestas

Tratar de usar stop(false, true) en lugar de solo stop(). This means the animation will be 'completed' before the new animation is started.

Furthermore, you can store the height and width on the element using data() función.

Respondido el 31 de enero de 12 a las 00:01

Before the hover(), you could store the original and zoomed dimensions and positions of each in data attributes on the images themselves:

$(".locationimg").each(function() {
    var $this      = $(this),
        origWidth  = $this.width(), 
        origHeight = $this.height(), 
        zoomWidth  = origWidth * 1.1,
        zoomHeight = origHeight * 1.1,
        pos        = $this.position(),
        origTop    = pos.top,
        origLeft   = pos.left
        // ... also find zoomed top, left...
    ;
    $this.data({
        "origwidth":  origWidth,
        "origHeight": origHeight,
        "zoomWidth":  zoomWidth,
        "zoomHeight": zoomHeight
        /* etc. */
        /* ... also store top and left... */
    });
}).hover(
    // your hover code here
)

Then inside the hover handler, instead of trying to calculate on the fly, you could just read the dimensions/positions you've already got stored, and transition to the zoomed ones on mouseover, or the original on mouseout. This will also be a lot faster.

respondido 13 nov., 13:20

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.