Question

Update: found a solution, see below.

I’m trying to get a clicked tile div to do a quick shrink/grow transition, so the user has some feedback the tile was clicked. I found this easy to do with CSS3 animation, but would like a jQuery alternative so it works in IE8/9.

jQueryUI effect(‘scale’) seems like a good option. This would look better as the tiles have significant text content, and just using animate() for the width/height/top/bottom won’t scale that content but just squash it together.

I have a sample that works except that the clicked tile jumps between the shrink and grow phase. Looking for suggestions on how to make the tile grow back without the little jump.

Here is my working sample (sorry no jsFiddle–this doesn’t seem to work there):

div 
{ 
    margin: 0px;  
    background: green; 
    border: 10px solid black; 
    color: white;

    width: 250px;
    height: 250px;

}

body 
{
    margin: 20px;
}


$(document).ready(function() {

$("div").click(function () {

    $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 125, 
        function () {

            $(this).effect("scale", {percent: 111, origin: ['middle','center']}, 125);
          });
    });   
});


    <div><h1>hi</h1><p>blah</p></div>

Looking inside jQueryUI I’m guessing something is happening with a wrapper div being applied, but it’s a little beyond me. Any suggestions?

Here is a jsFiddle for my CSS3 effect, which shows the desired look: http://jsfiddle.net/dex3703/n2RJs/

Thanks!

Answer 1

Found a solution–add a class with the correct layout attributes after the div is shrunken, then scale that back up. It’s ugly compared to CSS but it’s passable for a quick button-click transition. Weird thing must be some rounding going on as exactly double the shrink doesn’t restore it to the original size. Putting it to 111% works okay if you don’t look too closely.

Suggestions or comments appreciated!

.inner
{ 
    position: absolute; 
    margin: 0px;  
    background: green; 
    border: 10px solid black; 
    color: white;


    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.innerpostmove
{
    position: absolute; 
    top: 11px;
    bottom: 11px;
    left: 11px;
    right: 11px;

}

body { margin: 20px;}

.container 

{
    position: relative; 
    width: 250px; 
    height: 250px;
    background: purple;
}

    $(".inner").mousedown(function () {

      $(this).effect("scale", {percent: 90, origin: ['middle','center']}, 100, function () {

        var item = $(this).addClass("innerpostmove");

        setTimeout(function () {
            item.effect("scale", {percent: 111, origin: ['middle', 'center']}, 100);
        }, 100);

        setTimeout(function () {
            item.removeClass('innerpostmove');
        }, 200);

      });

    }); 


<div class="container">
    <div class="inner" ><h1>hi</h1><p>blah</p></div>
</div>