Velocity.js - 트리거링 애니메이션

Question

저는 현재 CSS 애니메이션을 없애고 Velocity.js로 대체하려고합니다 (새로운 애니메이션 제작 과정에서).

<div class="video-thumbnail"> 
    <img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" /> 
    <div class="overlay"> 
    <a href="http://bbc.co.uk" class="thumbnail-link"> 
     <div class="title"> 
     <div class="title-display"> 
      <h5 class="SlideIn">Title One</h5> 
      <h6 class="SlideIn">Title Two</h6> 
     </div> 
     </div> 
    </a> 
    </div> 
</div> 

이이 .overlay 요소에 페이드 CSS를 통해 제어된다

는 현재 내가 그리드 항목이있다. .

$('.overlay').hover(function(){ 
    $(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500}); 
}); 

그러나 아무것도 일어나고있는 것 같다 : 내가 다음하고 싶은 것은 h5 & h6 클래스에서 슬라이드에 대해 나는 다음과 같은 코드를 작성했습니다

입니다. 나는 Javascript에 아주 익숙하기 때문에 나는 어딘가에 선을 따라 어리석은 실수를 범했지만 그것이 무엇인지 알아낼 수 없다고 추정하고있다.

나는 전체 조각 아래에 포함했고 또한 here @ AldoRomo88 언급과의로드 순서에 문제가 있었다 @jmcgriz으로

$('.overlay').hover(function(){ 
 
\t $(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500}); 
 
});

#thumbnail-array { 
 
\t width: 100%; 
 
} 
 

 
.gutter-sizer { 
 
\t width: 0.03%; 
 
} 
 

 
.video-thumbnail { 
 
    position: relative; 
 
    background-color: #777; 
 
    overflow: hidden; 
 
    line-height: 0px; 
 
    margin: 0px; 
 
} 
 

 
.video { 
 
    \t position: absolute; 
 
    margin-top: none; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
    display: none; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 50; 
 
} 
 

 

 
.thumbnail-link { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /*important, forces to 100% height of parent*/ 
 
    opacity:0; 
 
    -webkit-transition: opacity .5s ease; 
 
    -moz-transition: opacity .25s ease; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
} 
 

 

 
.title { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    font-family: helvetica; 
 
    width: 100%; 
 
    line-height: 0px; 
 
} 
 

 
.title-display { 
 
\t display: block; 
 
\t width: 100%; 
 
} 
 

 
.video-thumbnail:hover .thumbnail-link { 
 
    text-decoration: none; 
 
    opacity:1; 
 
} 
 

 
.imgspacer { 
 
\t width: 100%; 
 
    max-width:100%; 
 
} 
 

 
.picturehelper { 
 
\t display: inline-block; 
 
} 
 

 
.video-thumbnail:hover .video { 
 
    display: inline; 
 
} 
 

 
h5 { 
 
\t display: inline-block; 
 
\t width: 100%; 
 
    font-size: 2em; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    line-height: normal; 
 
} 
 

 
h6 { 
 
\t display: inline-block; 
 
\t width: 100%; 
 
    font-size: 0.75em; 
 
    letter-spacing: 0.3em; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-weight: 100; 
 
    line-height: normal; 
 
}

<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script> 
 
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="video-thumbnail"> 
 
    <img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" /> 
 
    <div class="overlay"> 
 
    <a href="http://bbc.co.uk" class="thumbnail-link"> 
 
     <div class="title"> 
 
     <div class="title-display"> 
 
      <h5 class="SlideIn">Title One</h5> 
 
      <h6 class="SlideIn">Title Two</h6> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

을 찾을 수 있습니다 페이지의 스크립트.

는 단순히 첫 번째 쿼리를로드하여 문제를 해결 (내 자신의 서버에 스크립트를 호스팅!) 나는 당신이 당신의`find` 문에서 기간을 놓치고 말 것 박쥐