jQuery로 상자 그림자를 애니메이션화하는 올바른 방법

jQuery로 상자 그림자를 애니메이션화하는 올바른 방법

jQuery로 상자 그림자 속성을 애니메이션화하는 데 올바른 구문은 무엇입니까?

$().animate({?:"0 0 5px #666"});

직답

그림자 애니메이션에 에드윈 마틴의 jQuery 플러그인을 사용하는 것은.animate방법은 단순히 "boxShadow"와 함께 일반 구문을 사용하면 색상, x- 및 y-오프셋, 블러-반지름 및 스프레드-반지름과 같은 모든 면이 애니메이션화됩니다.여러 그림자 지원 기능이 포함되어 있습니다.

$(element).animate({ 
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}) 

---

대신 CSS 애니메이션 사용

jQuery는 다음을 변경하여 애니메이션을 만듭니다.styleDOM 요소의 속성 - 특정성으로 예상치를 유발하고 스타일시트에서 스타일 정보를 이동할 수 있습니다.

CSS 섀도우 애니메이션에 대한 브라우저 지원 통계를 찾을 수는 없지만 애니메이션을 직접 처리하는 대신 JS를 사용하여 애니메이션 기반 클래스를 적용하는 것을 고려해 볼 수 있습니다.예를 들어 스타일시트에서 상자 그림자 애니메이션을 정의할 수 있습니다.

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}
    
.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

그러면 네이티브를 사용할 수 있습니다.animationendJS 코드에서 수행하던 작업과 애니메이션의 끝을 동기화하는 이벤트:

바닐라 JS:

element.classList.add('shadow-pulse')
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse')
    // do something else...
})

jQuery:

$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})

jQuery 1.4.3+를 사용하는 경우 추가된 cssHooks 코드를 활용할 수 있습니다.

Shadow hook: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js 상자를 사용하여

다음과 같은 작업을 수행할 수 있습니다.

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

후크는 아직 색상을 애니메이션으로 만들 수는 없지만 추가할 수 있는 작업이 있을 것으로 확신합니다.

예: http://jsfiddle.net/petersendidit/w5aAn/

플러그인을 사용하지 않으려면 약간의 CSS를 사용하면 됩니다.

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

확인해보세요: http://jsfiddle.net/Z8E5U/

CSS 애니메이션에 대한 전체 문서화를 원한다면 마법의 길은 여기서 시작됩니다.

나는 ShaneSauce 솔루션을 좋아합니다! ID 대신 클래스를 사용하고 jQuery addClass/delay/removeClass를 사용하여 모든 요소에 효과를 추가/제거할 수 있습니다.

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});

여기 플러그인 없이 하는 방법의 예가 있습니다: jQuery 애니메이션 박스 그러나 플러그인의 사용과 함께 제공되는 추가 기능을 가지고 있지는 않지만, 저는 개인적으로 광기 뒤에 숨겨진 방법을 보는 것(그리고 이해하는 것)을 좋아합니다.

언급URL : https://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery