jQuery -Fadeout에서 Scroll / Fadein의 "Scrollstop"
문제
스크롤 이벤트에 의해 발사되는 DIV 포지셔닝 작업이 있습니다. 스크롤 이벤트가 여러 번 발사되어 깜박 거리는 DIV가 발생합니다. 내 계획은 더 이상 스크롤 이벤트가 발사되지 않는 즉시 Div와 사라지는 것을 사라지는 것입니다. 스크롤이 끝인지 어떻게 확인할 수 있습니까? 나는 타임 아웃 <-> 스크롤의 조합에 대해 생각했지만 실제로 내가 원하는대로 아무것도 효과가 없었습니다. 여기 내가 지금까지 얻은 것입니다.
$(document).ready(function(){
//var animActive = false;
$(window).scroll(function() {
/*
if (animActive == false){
animActive = true;
$('.mceExternalToolbar').fadeOut(100, function () {
$('.mceExternalToolbar').fadeIn(3000, function () {
animActive = false;
console.log("NOW");
});
});
}
*/
topParentx = $('#tinyMCEwrapper').position().top;
if ($(this).scrollTop() >= topParentx){
$('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
} else {
$('.mceExternalToolbar').css('top', "0px");
};
});
});
보시다시피 나는 마지막 시도 중 하나를 남겼지 만 페이드 기능의 콜백은 예상대로 작동하지 않았습니다.
해결책
불행히도 스크롤 스톱의 개념은 없으므로 실제로 애니메이션을 트리거 할 수는 없습니다. 더 잘 작동하는 것은 대신 DIV의 '상단'속성을 애니메이션하여 깜박 거리는 대신 새로운 위치로 부드럽게 미끄러지도록하는 것입니다.
topParentx = $('#tinyMCEwrapper').position().top;
var topTarget = "0px";
if ($(this).scrollTop() >= topParentx){
topTarget = ($(this).scrollTop()-topParentx) + "px";
}
$('.mceExternalToolbar').stop().animate({top, topTarget}, 500);
다른 팁
스크롤 스톱 이벤트를 만들기 위해 jQuery 특수 이벤트를 사용할 수 있습니다. James Padolsey는 위대한 글을 썼습니다 스크롤 스톱 이벤트의 예.
스크롤에 펄스하지 않도록 수정하십시오! 설정 타임 아웃
var animActive = false;
$(window).scroll(function(){
if (animActive == false){
animActive = true;
$('#target').fadeOut(100, function () {
var scrl = setTimeout( function(){
animActive = false;
$('#target').fadeIn(500);
}, 2000);
});
}
});
내가 어제 행복했던 동안 ... 오늘 현실 뇌졸중 ... 사파리는 움직이는 div 뒤에 필요한 모든 조각을 다시 렌더링하지 않고 반응합니다. 특히 Tinymce의 iframe에 대한 것입니다. 그래서 나는 다음으로 끝났고 이것은 꽤 잘 작동합니다. 콜백이 발사 된 경우에만 Div-> 애니메이션을 배치하여 -> 페이드로 사라집니다 ..
$(document).ready(function(){
$(window).scroll(function() {
topParentx = $('#tinyMCEwrapper').position().top;
var topTarget = "0px";
if ($(this).scrollTop() >= topParentx){
topTarget = ($(this).scrollTop()-topParentx) + "px";
$('.mceExternalToolbar').animate({opacity: 0}, 1);
}
$('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){
$('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing');
});
});
});
제휴하지 않습니다 StackOverflow