Как анимировать размер этих вложенных элементов div? (JQuery)

Question

Как анимировать размер этих вложенных элементов div? (JQuery)

0

Я создал прядильную машину с анимацией CSS. Теперь я хочу, чтобы весь спиннинг-редуктор оживлялся от 1% до 110% до 100% затем уменьшался до 1%. Или в основном от 1px до 90px до 80px (нормальный размер), затем обратно вниз до 1px.

Прямо сейчас jQuery, который я использую для элементов внутри #spinner div, анимирует его, но он все еще выключен. Анимация должна действовать как шкала перехода CSS, где она увеличивается с 1% до 110%. В настоящий момент моя анимация находится вне центра.

Есть предположения?

jsFiddle: http://jsfiddle.net/leongaban/d7UjD/681/
NEW CodePen: http://codepen.io/leongaban/pen/wJAip

Должен ли я оживить каждый элемент в #spinner div?

jQuery для увеличения и уменьшения анимации:

function firstAnimate() {
    $('#spinner').animate({width: "110px", height: "110px"}, secoundAnimate);
}

function secoundAnimate() {
    $('#spinner').animate({width: "80px", height: "80px"}, 'slow', thirdAnimate);
}

function thirdAnimate() {
    $('#spinner').animate({width: "1px", height: "1px"}, 'fast', fourthAnimate);
}

function fourthAnimate() {
    $('#spinner').hide;
}

firstAnimate();

Мой прядильный механизм HTML:

<div id="spinner">
    <div id="logo">
        <img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
    </div>
    <div id="gear" class="spin">
        <img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
    </div>
</div>

CSS:

#spinner {
    position: absolute;
    width: 80px; height: 80px;
    top: 35%; left: 50%;
    margin-left: -40px;
    background: blue;
}

#logo {
    position: absolute; top: 0; left: 0; width: 80px; height: 80px; z-index: 3;
}

#logo img { width: 100%; height:100%; }

#gear {
   position: absolute; top: 0; left: 0;
   -webkit-transition: -webkit-transform 0.1s;
   transition: transform 0.1s;
   -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
   transform: translateX(100%) translateY(-100%) rotate(45deg);
   z-index: 2;
}
#gear img { display:block; }

Leon Gaban 25 сен. 2013, в 17:25

Источник

Теги:

jquery

css3

animation

jquery-animate

1 ответ

Ещё вопросы

Leon Gaban · Accepted Answer · 2013-09-25T16-32-00.000Z

Мне нужно было использовать комбинацию шкалы CSS и jQuery для получения эффекта, который я хотел.

Масштаб делает намного лучшую работу по масштабированию из центра без усилий, спасибо @Zeaklous

http://codepen.io/leongaban/pen/wJAip

Нужен класс для анимации и один для анимации вниз:

.animateUp {
    -webkit-animation: animateUp .5s ease-in-out;
    animation: animateUp .5s ease-in-out;
}
.animateDown {
   -webkit-animation: animateDown .5s ease-in-out;
   animation: animateDown .5s ease-in-out;
}

@-webkit-keyframes animateUp { 
    0%  {
        -webkit-transform: scale(.1);
       transform: scale(.1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(.1);
    }
    100% { 
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }
}

JQuery, поэтому я мог контролировать, когда он оживляет и выходит:

$('#animate-up').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateDown');
    $('#spinner').addClass('animateUp');
    console.log('animate up');
});

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
    console.log('animate down');
});