Как мне анимировать глубину тени box box (с переходами jQuery или CSS3)? - PullRequest
Новая
       17

Как мне анимировать глубину тени box box (с переходами jQuery или CSS3)?

2 голосов
/ 02 марта 2012

Это делает задержки, но, кажется, не применяет изменения стиля до конца: 

for (i=20;i>=0;i--) {            
    var boxShadow = i+"px "+i+"px "+i+"px #888";
    $('article').css("box-shadow", boxShadow);
    sleep(20);
}
function sleep(ms)
{
    var dt = new Date();
    dt.setTime(dt.getTime() + ms);
    while (new Date().getTime() < dt.getTime());
}

Это вообще не относится к задержкам: 

for (i=20;i>=0;i--) {            
    var boxShadow = i+"px "+i+"px "+i+"px #888";
    $('article').delay(500).css("box-shadow", boxShadow);
}

Можно ли сделать это проще с переходами css3? Я просто делаю небольшую ошибку jquery в образце задержки?

Спасибо всем, кто может помочь.

Ответы [ 2 ]

4 голосов
/ 02 марта 2012

Вы можете использовать классы и setTimeout, чтобы использовать переходы CSS3 для эффекта анимации:

CSS - 

#some-element {
    -webkit-transition : all 0.5s linear;
       -moz-transition : all 0.5s linear;
        -ms-transition : all 0.5s linear;
         -o-transition : all 0.5s linear;
            transition : all 0.5s linear;
}
#some-element.ani-state {
    -webkit-box-shadow : 0 0 24px #000;
       -moz-box-shadow : 0 0 24px #000;
            box-shadow : 0 0 24px #000;
}

Я использовал all для объявлений перехода из-за Chrome ... некоторые версии Chrome используют -webkit-box-shadow, а более новые версии используют box-shadow. all не имеет большого значения, если вы не изменяете какие-либо другие свойства элемента (или если вы хотите анимировать эти изменения свойств).

JS - 

$(function () {

    var $someElement = $('#some-element');

    $someElement.on('click', function () {
        $someElement.addClass('ani-state');
        setTimeout(function () {
            $someElement.removeClass('ani-state');
        }, 500);
    });
});

Вот демоверсия: http://jsfiddle.net/jasper/tvfPq/1/

Обратите внимание, что в демоверсии я использовал два box-shadows: box-shadow : 0 0 24px #000, inset 0 0 24px #999;

2 голосов
/ 25 сентября 2013

Недавно был выпущен плагин jquery, который делает это. Взять вершину: Shadowmation

...