拆离事件的工作仅在第一次使用jQuery

我有一个时间表，其示出了根据所选择的日期不同的内容。日期可以通过点击时间轴来选择，或者用鼠标滚轮滚动。我有一些附加到每个内容的动画，为了有不同的内容元素淡出/淡出效果，为此，我使用嵌套动画和回调。拆离事件的工作仅在第一次使用jQuery

我不能做的，是等待一个动画结束，下一个开始之前，如果滚动快速度。或者，更好的，我拆开滚动事件的动画功能的开始，并重新将其固定，作为最后animate函数调用的回调：该作品仅在第一次，但不是随后滚动。

有什么想法？

功能检测滚动：

 //detect mouse scrolling and determine the direction 
     function detectScroll() { 
      $('.events-content').first().bind('mousewheel', function (e) { 
       var delta = e.originalEvent.wheelDelta; 
       if (delta > 0) { 
        jumpToEvent('prev'); 
       } else { 
        jumpToEvent('next'); 
       } 
      }); 

      //firefox 
      $('.events-content').first().on('DOMMouseScroll', function (e) { 
       var delta = e.originalEvent.detail; 
       if (delta < 0) { 
        jumpToEvent('prev'); 
       } else if (delta > 0) { 
        jumpToEvent('next'); 
       } 
      }); 
     }

功能detatching滚动

function detachScroll(){ 
      console.log('detach'); 
      $('.events-content').first().unbind('mousewheel'); 
      $('.events-content').first().off('DOMMouseScroll'); 
     }

功能的动画，jumpToEvent函数调用时，选择正确的内容显示：

//display correct content depending on the selected date 
function updateVisibleContent(event, eventsContent) { 

    var visibleContent = ...., selectedContent =....; 

    detachScroll(); 

    visibleContent.find('....').each(function() { 
     $(this).animate({ 
      opacity: 0 //hide current content 
     }, 600, function() { 

      visibleContent.removeClass('selected'); 
      selectedContent.attr('class', 'selected'); 

      //now show the next content, with 3 subsequent steps (Showing only one for the sake of readability) 
      selectedContent.find('...').first().animate({ 
       opacity: 1 
      }, 500, function() { 
        detectScroll(); 
      });    
     }); 
    });  
}

来源

2017-09-06 sissy

那么使用'.stop（）'来停止旧的动画呢？ – Deckerz

您是否尝试使用文档准备功能注册您的动画功能，以便在页面委托您想要的任何事件时完成动画并启动新的动画功能？ –

@Deckerz我曾尝试使用.stop（），在动画功能的开始，而不是分离（），但我有一个类似的行为，它的工作原理是第一次，然后如果我继续滚动快，下内容全部显示在一起。顺便说一下，这不是我想要的行为，我更愿意“等待”内容完全显示。任何线索？ – sissy

你需要每一个有生命的呼叫前加.stop()，这确保了没有未决/正在进行动画调用一个动画时。

来源

2017-09-06 09:35:55 Deckerz

您是否尝试过的jQuery deferred-object，它是等待异步函数来完成的一种方式。

function doAnimations(domElement, i) { 
    var dfd = jQuery.Deferred(); 

    $(domElement[i]).animate({ 
    //do somthing 
    }, 600, function() { 
    dfd.resolve 
    }) 

    return dfd.promise(); 
} 

//And this is how you can itterate tru items 
(function rec(i){ 
    if(i >= numbers of itterations) { 
    console.log('End') 
    return false 
    } 

    doAnimations(domElement, i).done(function(){ 
    rec(++i) 
    }) 
})(0)

来源

2017-09-06 10:06:55 Zorken17

我见过类似的解决方案，https://stackoverflow.com/questions/18360963/在这里重复一个嵌套动画在jQuery中，但我认为它不能解决我的问题。我会试一试，如果我没有得到我的例子的工作，但现在看起来很好。 – sissy

拆离事件的工作仅在第一次使用jQuery

回答

相关问题