2012-08-03 3 views
0

문제점 : 애니메이션의 첫 번째 부분 만 가져옵니다. 호버 애니메이션을 실행하지 않습니다. 아이디어는 위에 엎어 놓았을 때 바닥을 위 또는 아래로 움직이는 것입니다. 탐색 모음 애니메이션이 스크립트를 사용하여 http://ripsraps.com/daniel/나머지 애니메이션을 가져올 수 없습니다.

:이 사이트에서 작업

$(document).ready(function() 
{ 
    slide("#sliding-navigation", 25, 15, 150, .8); 
}); 

function slide(navigation_id, pad_out, pad_in, time, multiplier) 
{ 
    var list_elements = navigation_id + " li.sliding-element"; 
    var link_elements = list_elements + " a"; 
    var timer = 0; 
    $(list_elements).each(function(i) 
    { 

     $(this).css("margin-top","-180px"); 
     timer = (timer*multiplier + time); 
     $(this).animate({ marginTop: "0" }, timer); 
     $(this).animate({ marginTop: "15px" }, timer); 
     $(this).animate({ marginTop: "0" }, timer); 
    });  
    $(link_elements).each(function(i) 
    { 
     $(this).hover(
     function() 
     { 
      $(this).animate({ paddingTop: pad_out }, 150); 
     },  
     function() 
     { 
      $(this).animate({ paddingTop: pad_in }, 150); 
     }); 
    }); 
} 

PS : http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

이 JQuery와이다 나는 바이올린을 모르는 , 어떤 바이올린 링크도 제공하지 않습니다.

답변

0

이제 Chrome 디버거에서 코드를 검사 할 때 알 수 있듯이 애니메이션이 적용됩니다. 올바르게 적용하지 않으면 나타나지 않습니다.

여러분은 link_elements 대신 list_elements에 호버 효과를 적용해야한다고 생각합니다. paddingTop이 아니라 animate 할 marginTop을 사용합니다.

추신 : 바이올린은 그리 어렵지 않습니다. 한번 시도해보십시오.

관련 문제