Aktivieren Sie die Funktion an der eingestellten Position während der Ausführung der Animation

Question

Ich habe an einer Spieluhr Art von Programm gearbeitet, aber ich habe ein Problem festgestellt. Meine Musikbox arbeitet mit programmatisch generierten erstellten Divisionen, die sich über eine andere Division als Hintergrund bewegen. Die Animation arbeitet und bewegt sich genau, aber ich möchte eine Funktion aktivieren können, wenn die Division an einem bestimmten Ort ist.

Ich weiß, dass ich dies tun kann, indem ich eine Schleife erzeuge, die eine kleine Animation spielt und jedes Mal überprüft, wenn die Animation abgeschlossen ist, aber das ist etwas, was ich gerne vermeiden würde.

Vielen Dank im Voraus

//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") 
}); 

Edit: Ich habe in diesem seit einiger Zeit sieht und während ich nicht in der Lage wirklich ein solusion zu finden. aber jetzt habe ich nur Animationen aneinander gekettet wie folgt aus:

<!--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> 

} 

Dieser Code macht, wenn die Schaltfläche geklickt wird ein div erstellt wird die Animation beginnt und am Ende löscht er selbst. Das ist eine sehr einfache Erklärung, die ich kenne, aber das ist im Wesentlichen das Einzige, was es tut.

Ich bin immer noch auf der Suche nach der richtigen Antwort und wenn jemand von Ihnen es wissen bitte helfen, aber für jetzt hoffe ich, dass dies für jeden hilft, der das gleiche Problem hat.

Answer 1

Sie müssen step Callback-Funktion verwenden, die bei jedem Schritt der Animation ausgelöst wird. Es dauert zwei Argumente, die auf das animierte DOM-Element festgelegt ist. Innerhalb step Callback-Funktion können Sie den Wert jedes Schritts dann vergleichen erfüllt Ihren Vergleich, löst Ihre gewünschte Funktion aus.

Hier ist nur ein Beispiel, um Ihnen den Ansatz zu zeigen: http://jsfiddle.net/tg5op333/27/