эффект усадки/увеличения масштаба для нажатой кнопки?

Question

Обновление: найдено решение, см. Ниже.

Я пытаюсь получить щелчок плитки, чтобы сделать быстрый переход/переход на рост, так что у пользователя есть некоторая обратная связь с плиткой. Я нашел это легко сделать с анимацией CSS3, но хотел бы использовать альтернативу jQuery, поэтому он работает в IE8/9.

Эффект jQueryUI ('scale') кажется хорошим вариантом. Это выглядело бы лучше, так как плитки имеют значительный текстовый контент, и просто использование анимации() для width/height/top/bottom не будет масштабировать этот контент, а просто сквозит его вместе.

У меня есть образец, который работает, за исключением того, что щелкнутая плитка перепрыгивает между усадкой и фазой роста. Ищете предложения о том, как заставить плитку расти без малого прыжка.

Вот мой рабочий образец (жаль нет jsFiddle - это не кажется, не работает там):

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> 

Заглянув jQueryUI Я предполагаю, что-то происходит с оберточной DIV применяется, но это немного выше меня. Какие-либо предложения?

Вот в jsFiddle для моего CSS3 эффекта, который показывает желаемый вид: http://jsfiddle.net/dex3703/n2RJs/

Спасибо!

Answer 1

Найден решение - добавьте класс с правильными атрибутами раскладки после того, как div усохнет, а затем масштабируйте его. Это уродливое по сравнению с CSS, но оно доступно для быстрого перехода по кнопке. Странная вещь должна быть продолжена, так как ровно вдвое меньше усадки не восстанавливает ее до первоначального размера. Положив его на 111%, все хорошо, если вы не смотрите слишком внимательно.

Предложения или комментарии оценили!

.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> 

Answer 2

Вместо оживляющего масштаба вы также можете анимировать ширину и высоту div.

$(this).animate({ 

    "width": "-=10", 
    "height": "+=10" 

}, 200, function() { 

    "width": "+=10", 
    "height": "+=10" 

}); 

У меня тоже была эта проблема. Вот демонстрация того, как это выглядит: Нажмите на квадрат: My Site