Анимированная шкалаX / ScaleY

Question

jQuery не обеспечивает эффекта перехода scaleX / scaleY - есть ли решение (плагин) для этого?

Я думаю об этом примере:

авторское право на изображение: (c) Microsoft, 2011, http://msdn.microsoft.com/en-us/library/ms742560.aspx

Answer 1

Пользовательский интерфейс jQuery предлагает это.См. http://docs.jquery.com/UI/Effects/Scale

Answer 2

Я нашел хороший способ добиться этого с помощью CSS-переходов. Добавьте переходы «Легкость» в свой элемент, а затем, когда вы хотите его анимировать, используйте addClass jQuery, чтобы добавить новый класс, который содержит коэффициент масштабирования.

CSS:

.obj{
    width: 100px;
    height: 100px;
    background: grey;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.scale{
    -webkit-transform: scaleX(0.5);
    -o-transform: scaleX(0.5);
    -moz-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

JQuery:

$("#a_b").click(function(){
    $(".obj").addClass("scale");
});​

пример

Answer 3

jQuery обеспечивает эффект перехода ширина / высота. Вы не можете использовать это?

Вы также можете использовать таймер (setInterval) и создать собственную анимацию. Вы делите масштаб на количество кадров и масштабируете его кадр за кадром. Вы также можете использовать некоторые функции замедления, чтобы сделать анимацию более интересной.