jQuery는 드롭 다운을 깨지 않고 반복 애니메이션을 방지합니까?
-
19-09-2019 - |
문제
http://mmowned.org/dragon/slm/menu9.html
기존 버전 (Menu7.html)에서 애니메이션 Queing을 해결하기 위해 드롭 다운 메뉴에서 .stop ()를 사용해 보았습니다. 문제는 드롭 다운을 반쯤 "정지"한 다음 다시 시작할 때 메뉴를 깨고 중지 된 위치로 다시 연장됩니다.
나는 이것이 정말로 간단하다고 확신하지만 어떻게 이것을 고칠 수 있습니까?
$(document).ready(function() {
var nid=["bottom","nav","news","wow","emu","war","aoc","diablo","prog","trade"];
$('li.navhead2').click(function () {
var id = $(this).attr('id')
var query = jQuery.inArray(id, nid)
if (query !== -1 && query !== 0)
{
$("#menu"+query).slideFadeToggle('slow');
if (query !== 1 && query !== 0)
{
$(this).toggleClass("clicked");
}
else
{
$(this).toggleClass("clicked1");
}
}
else if (query === 0)
{
$("[id^=menu]").not("#menu1").slideUp('fast');
$("li.navhead2").removeClass("clicked");
}
});
slide("#sliding-navigation", 160, 182, 150, .8);
});
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.stop().animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);
};
슬라이드 함수는 내가 원하는 방식으로 작동하지만 드롭 다운은 (앞서 언급 한대로 깨지지 않음) 어떤 이유로 든 내 토글 크라스가 작동하지 않지만 (이전 버전에 있습니다).
해결책
당신은 사용합니다 toggle
가치 height
매개 변수.
또한 사용자가 다시 클릭하여 애니메이션을 방해 할 수 있습니다 ( .stop()
부분).
애니메이션 중에 나는 그것을 방해한다면 (높이의 50%라고 말하면) 다음 전화에서 내 애니메이션은 50%에서 0으로 갈 것입니다. 다음은 0에서 50%로 이동합니다.
문서를 중지하십시오 대기열을 지우거나 애니메이션의 끝을 얻기 위해 Wether를 지정할 수 있다고 지적합니다. 이것들은 당신의 경우입니다.
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.stop(true,true).animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);
};
두 사람을 주목하십시오 true
정지에 추가 된 값. 이것은 작동해야합니다.
제휴하지 않습니다 StackOverflow