Animasyon çalışırken ayar işlevini etkinleştirin

Question

Bir müzik kutusu türünde program üzerinde çalışıyorum ama bir sorunla karşılaştım. Müzik kutum, another bölümün arka planı olarak hareket eden programlı olarak oluşturulmuş oluşturulan bölümler ile çalışır. Animasyon çalışıyor ve düzgün bir şekilde hareket ediyor, ancak bölümün ayarlanmış bir yerde olduğu zaman bir işlevi etkinleştirebilmek istiyorum.

Bunu, küçük bir animasyon oynayan ve animasyonun her tamamlandığında kontrol edildiği bir döngü oluşturarak yapabileceğimi biliyorum, ancak bu kaçınmak istediğiniz bir şey. peşin

Teşekkür

//this is used to move the div 
$("#IdButtonMoveDown").click(function() { 
     $('#IdDivToMove').animate({ "top": "+=100%" }, { duration: 1000 }); 
}); 

//i want to activate the funtion when the div has reached the 40% top 
//position of the div that it is countaind within 
$('#IdDivToMove').???????(function() { 
    alert("Set position has been reached") 
}); 

Düzenleme: i bir süredir bu baktım ve ben gerçekten bir solusion bulmak mümkün olmamıştır ederken. ancak şimdilik ben sadece böyle animasyonlar birlikte zincirleme adres: düğme div o animasyonu başlar ve sonunda kendini siler oluşturulur tıklandığında bu kod ne yapar

<!--HTML begin--> 
<div id="OutputDiv" class="OutputClass"> 
    <button name="TestButtonFalingDiv" id="TestButtonFalingDiv">Test create div Falling</button> 
</div> 
<!--HTml end--> 


@section scripts { 

<script> 
    $(document).ready(function() { 

     $("#TestButtonFalingDiv").click(function() { 
      CreateFallingDiv(); 
     }); 

     //Set configuration 
     //Maximum of 90 distance in totaal 
     var intFadeInDistance = 10; 
     var intMoveToMiddleDistance = 62; 
     var intLargerDistance = 3; 
     var intSmallerDistance = 3; 
     var intMoveToEndDistance = 2; 
     var intFadeOutDistance = 10; 

     var intFadeInDuration = 1000; 
     var intMoveToMiddleDuration = 6200; 
     var intLargerDuration = 300; 
     var intSmallerDuration = 300; 
     var intMoveToEndDuration = 200; 
     var intFadeOutDuration = 1000; 

     var countingCreatedDivAmount = 0; 

     function CreateFallingDiv() 
     { 
      countingCreatedDivAmount++; 
      var SetID = "MovingDiv" + countingCreatedDivAmount; 
      $("#OutputDiv").append("<div id='" + SetID + "' class='AnimatedDiv'></div>"); 


      $("#" + SetID).animate({ opacity: 1, top: "+=" + intFadeInDistance + "%" }, { duration: intFadeInDuration, easing: 'linear' }) 
      .animate({ "top": "+=" + intMoveToMiddleDistance + "%" }, { duration: intMoveToMiddleDuration, easing: 'linear' }) 
      .animate({ width: '8%', height: '8%', top: "+=" + intLargerDistance + "%" }, { 
       duration: intLargerDuration, easing: 'linear', 
       complete: function() { 
        alert("Function activation"); 
       } 
      }) 
      .animate({ width: '4%', height: '4%', top: "+=" + intSmallerDistance + "%" }, { duration: intSmallerDuration, easing: 'linear' }) 
      .animate({ "top": "+=" + intMoveToEndDistance + "%" }, { duration: intMoveToEndDuration, easing: 'linear' }) 
      .animate({ opacity: 0, top: "+=" + intFadeOutDistance + "%" }, { duration: intFadeOutDuration, easing: 'linear' }) 
      .animate({ opacity: 0, top: "+=" + intFadeOutDistance + "%" }, { 
       duration: intFadeOutDuration, easing: 'linear', 
       complete: function() { $("#" + SetID).remove(); } 
      }); 
     } 
    }); 
</script> 

<style> 
    .AnimatedDiv { 
     top:    5%; 
     left:    48%; 
     width:    4%; 
     height:    4%; 
     position:   absolute; 

     color:    white; 
     opacity:   0; 
     background-color: blue; 

     border-radius:  50%; 
     behavior:   url(PIE.htc); 
     display:   block; 
    } 

    .OutputClass { 
     width:    100%; 
     height:    100%; 
     position:   relative; 
     border:    red 5px solid; 
    } 
</style> 

} 

olduğunu. Bu benim bildiğim çok basit bir açıklama ama aslında bu tek şey.

Hala doğru cevabı arıyorum ve eğer herhangi biriniz bunu biliyorsanız lütfen yardım edin ama şimdilik bunun aynı problemi olan herkes için yardımcı olacağını umuyorum.

Answer 1

Sen animation.It her adımında ateşlenir step geri arama işlevini kullanmanız gerekir bunun o zaman animated.Within step geri çağırma işlevi her adımın değerini karşılaştırabilirsiniz olma DOM öğesine ayarlanır iki argüman alır karşılaştırmanızı karşılar, istediğiniz işlevi tetikler.

Size şu yaklaşımı gösterecek bir örnek: http://jsfiddle.net/tg5op333/27/