2016-07-29 2 views
2

마키 효과를 실현하고 싶습니다. 때로는 잘 풀리고, 때로는 잘못되어 가며, 이유를 알지 못합니다.마키 효과가 제대로 작동하지 않습니다.

Fiddle

내 코드 : 질문과 관련이없는

$(document).ready(function(){ 
    $(".menudepth1").children("a").click(function(){ 
     $(this).addClass("selected") 
    }) 
    function move(){ 
     var Parent=$("#left-con").find("ul"); 
     var Img=$("#left-con").find("li").eq(0); 
     var Width=Img.width(); 
     Img.animate({marginLeft:(-1*Width)+"px"},2000,function(){ 
      $(this).appendTo(Parent).css("marginLeft","0px"); 

     }) 
    } 
    setInterval(move,2000) 
}) 
+1

귀하의 jsfiddle에서 작동 – chirag

+1

인터벌 콜백은 애니메이션이 끝나기 전에 호출됩니다. 다음은 간격을 사용하는 것보다 더 나은 간단한 수정 방법입니다. https://jsfiddle.net/hpqxtdeq/2/ 그리고 각 이미지 슬라이드간에 약간의 지연이 필요한 경우 여기 : https://jsfiddle.net/hpqxtdeq/3/ –

답변

1

태드 비트,하지만 당신은 코드가 더 잘 수행하려면 나는 CSS 대신 마진의 변환 사용하는 것이 좋습니다 것입니다. 그 이유는 마진을 변경하면 모든 새로운 값으로 전체 페이지를 다시 렌더링해야하지만 변환은 문제의 요소 만 다시 그리기 때문입니다.

특히 모바일 브라우저가 당신을 사랑합니다!

Here은 관심이 있다면 깊이에 대해 (조금 길지 만) 기사입니다. :)

관련 문제