그래서 각 패널이 480x300 (상태 표시 줄의 경우 -20px)이고 왼쪽 또는 오른쪽으로 스크롤 할 수있는 두 개의 탐색 버튼이있는 웹 앱이 있습니다.마지막 div에 도달하면 .animate()를 중지하십시오.
표시된 모든 패널을 계속 스크롤 할 때를 제외하고는 모든 것이 훌륭하게 작동합니다.
마지막 패널에 도달 한 후 Jquery .animate()를 중지 할 수 있는지 궁금합니다. 이 마지막 패널 인 경우
안녕 에게http://jsfiddle.net/qpHSw/또는http://jsfiddle.net/yEsDQ/또는 http://jsfiddle.net/yEsDQ/show
가이 샘플 동적 UL에서 리튬을 계산 또 다른 데모를하고 따라 애니메이션을 조정 :
이 시도 .
코드
var cur = 1;
var max = $(".scroll-content ul").children("li").length;
$("nav.back").click(function(){
if (cur+1 > max) return;
cur++;
$("#panel").animate({
marginLeft: "-=500px",
}, 1000);
});
$("nav.forward").click(function(){
if (cur-1 < 1) return;
cur--;
$("#panel").animate({
marginLeft: "+=500px",
}, 1000);
});
그리고 가장 쉬운 신청을 위해 그것을 준다! – Ahhhhhhhhhhhhhdfgbv
히야 @ user1086990 기꺼이 도와 줘서, :) 건배, 나는이 하나의 경고를 제거했습니다 : http://jsfiddle.net/qpHSw/ 단지를 위해, 좋은 하나, 건배! –
당신은 어떤 값으로 X 좌표 위치를 제한 할 수 있습니다.
카운트를 사용하여 현재 디스플레이를 추적 할 수 있습니다. 이 같은 것 http://jsfiddle.net/gS33Y/3/
#panel 요소의 속성을 사용하여 패널 수를 계산하고 이동을 제한하기 위해 표시되는 패널을 추적 할 수 있습니다. 또한 슬라이드 여백을 500px (460 너비 + 20px 여백 + 20px 패딩)만큼 증가시켜야합니다.
var $panel = $("#panel")
$panel.data("slideCount", $("#panel li").length).data("currentSlide", 1);
$("nav.back").click(function() {
if ($panel.data("currentSlide") < $panel.data("slideCount")) {
$("#panel").animate({
marginLeft: "-=500px",
}, 1000);
$panel.data().currentSlide++;
}
});
$("nav.forward").click(function(){
if ($panel.data("currentSlide") > 1) {
$("#panel").animate({
marginLeft: "+=500px",
}, 1000);
$panel.data().currentSlide--;
}
});
창 폭 끝이 근처에있을 때 감지하고 오른쪽에는 공백을 남기지 않고 슬라이드 5의 끝에서 marginLeft을 종료 어쨌든이 있나요?
마진이 0이 아니라면 편도에 애니메이션을 적용하려면 클릭 수를 추가 할 수 없으며 매번 애니메이션을 적용 할 때 lis 수와 같지 않은 경우 다른 방법으로 만 애니메이션을 적용 할 수 있습니까? – noShowP
글쎄, 정말 모두에게 감사하고 싶다. 나는 생각하지만 (어리석게도, 인정할 정도로 너무) 5 패널 앱에 대해서는 필자가 필요한 패널에 다음 및 이전 버튼을 추가 할 수 있다고 생각한다. 긴 것을 개발하는 경우, 나는 그것을 확실히 활용할 것입니다 :] 고맙습니다. 나는 신인 인 것 같은 느낌이 든다 .- – Ahhhhhhhhhhhhhdfgbv