Jquery.animate 점프 문제

긴 시간 리스너, 처음 방문하는 사람. 나는 사이트를 가지고있다 http://www.rivingtondesignhouse.com.php53-3.dfw1-1.websitetestlink.com/Jquery.animate 점프 문제

나는 플렉스 슬라이더를 움직이게하고 싶다. 나는이 문제가 내가 아무런 문제없이 일하고있는 슬라이딩 다운을 선호한다. 문제는 슬라이더가 나타나면 점프가 발생한다는 것입니다. 이 점프를 어떻게 제거 할 수 있습니까? 여기

#home-slider.flexslider { 
    background: url("images/slider-loader.gif") no-repeat scroll 50% 50% #FFFFFF; 
    height: auto; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    z-index: 1; 
    position:relative; 
} 
.bump2 { 
    position: relative !important; 
    padding-bottom: 44% !important; 
}

일부 HTML

<div id="home-slider" class="flexslider"> 
     <ul class="slides"> 

     <li> 
      <img src="http://www.rivingtondesignhouse.com.php53-3.dfw1-1.websitetestlink.com/wp-content/uploads/2013/09/HOME-PAGE-WELCOME-2.jpg" /> 

     </li> 



     </ul> 
    </div> 
    <!-- end slider -->

모든 최고의,

,536,913,632입니다 : 여기

내 JQuery와 여기에

$(window).load(function() { 
    $('#home-slider').css("display", "none"); 

    var realH = $("#home-slider").width() * 0.4; 
    $("#home-slider").height(realH); 
    $('#home-slider').css('display', 'block'); 
    $('#home-slider').css('height', 'auto'); 
    $('#home-slider').addClass('bump2'); 
    $('#home-slider').animate({ 
     marginTop: '-44%' 
    }, 10); 
    $('#home-slider').removeClass('bump2'); 
    $('#home-slider').animate({ 
     marginTop: '0' 
    }, 1500, 'easeInOutExpo'); 
});

중 일부는 CSS입니다 10

출처

2013-10-15 user2298128

당신은 때 .animate 완료 콜백을 적용 할 필요가 보여줍니다. 지금은 단지 하나의 큰 블록 일 뿐이며 동시에 모두 실행됩니다. 애니메이션을 끝내기 전에 나머지 애니메이션을 기다려야합니다. –

jquery에서 준비된 문서가 아닌 CSS에 디스플레이 none을 설정해야한다고 생각합니다.

예 :

#home-slider{ 
    display:none; 
    ... 
}

이로드 후 요소를 숨기고이 arent 이런 식으로 -이 다음 숨겨진로드해야합니다 당신이

출처

2013-10-15 16:50:32 Joe

Jquery.animate 점프 문제

답변

관련 문제