Erstellen einer generischen Funktion für eine Funktion einer Animation, die ich habe

Question

ich JQuery lerne, und ich mache meine neue Website. Unglücklicherweise bin ich eher ein Webdesigner (mit Erfahrung mehr auf Design, das auf dem Programmieren ist) und ich bleibe bei dem Versuch, eine generische Funktion zu erstellen, damit ich sie für verschiedene div Elemente im HTML verwenden kann.

Dies ist der Code

$(".myCircle").hover(
    // when the mouse enters the box do... 
    function(){ 
     var $box = $(this), 
     offset = $box.offset(), 
     radius = $box.width()/2, 
     circle = new SimpleCircle(offset.left + radius, offset.top + radius, radius); 

     $box.mousemove(function(e){ 
     if(myHover != "transition1" && circle.includesXY(e.pageX, e.pageY)){ 
      $(this).css({"cursor":"pointer"}); 
      myHover = "transition1"; 
       $("#black").stop().animate({"top":"-200px"}, speed/2, function(){ 
        myHover = 1; 
       }); 
      } 

      else if(!circle.includesXY(e.pageX, e.pageY)){ 
      $(this).css({"cursor":"default"}); 
       if(myHover == 1 || myHover == "transition1"){ 
        myHover = "transition0"; 
        $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
         myHover = 0; 
        }); 
        $("body").unbind('mousemove'); 
       } 
      } 
     }); 

    }, 
    // when the mouse leaves the box do... 
    function() {  
     if(myHover == 1 || myHover == "transition1"){ 
      myHover = "transition0"; 
     $(this).css({"cursor":"default"}); 
      $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
       myHover = 0; 
      }) 
     }; 
     $("body").unbind('mousemove'); 
    } 
); 

Die Animation ein div mit Radius Ecke, die wie ein Kreis aussieht, und das mit meiner auf Mausbewegung aktiviere ich eine Animation hinter dem Kreis heraus zu kommen.

Was ich möchte es achive ist nicht die ganze Zeit die gleiche lange Funktion zu schreiben, wenn ich will es für mehrere div/Kreis verwenden. Aber verwenden Sie eine generische Funktion erneut.

eine Funktion so etwas wie: function circleHover (myCircle, mytarget, eventIn(), eventout())

wo mytarget jedes andere Element sein könnte, oder sogar die gleichen myCircle und eventIn() und eventout() sind nichts anderes als die Animation (oder irgendetwas anderes) in Situationen, wenn die Maus eintritt und wenn die Maus geht.

ich große Schwierigkeiten habe in allgemeiner Weise diese

$ ("# black") bei der Schaffung von stop() animiert ({ "top": "- 200px"}.., Geschwindigkeit/2, Funktion() { myHover = 1; });

Es tut mir leid für meine dumme Frage, ich weiß wirklich für die Antwort suchen nicht, wo oder wo mehr zu erfahren.

==============================

UPDATE- 1. Dezember am Ende ich mit am Ende dieser Code. Ich denke, dass es auf halbem Weg ist, was ich wollte.

function aniCircle(in_out, myThis, target, endPos, movePos, speed){ 
    if(typeof speed == "undefined"){speed = speed2}; 

    if(in_out == 1){ 
     var $box = myThis, 
     offset = $box.offset(), 
     radius = $box.width()/2, 
     circle = new SimpleCircle(offset.left + radius, offset.top + radius, radius); 

     $box.mousemove(function(e){ 
      if(myHover != "transition1" && circle.includesXY(e.pageX, e.pageY)){ 
       $(this).css({"cursor":"pointer"}); 
       myHover = "transition1"; 

       $(target).stop().animate(movePos, speed, function(){ 
        myHover = 1; 
       }); 
      }else if(!circle.includesXY(e.pageX, e.pageY)){ 
       $(this).css({"cursor":"default"}); 
       if(myHover == 1 || myHover == "transition1"){ 
        myHover = "transition0"; 
        $(target).stop().animate(endPos, speed, function(){ 
         myHover = 0; 
        }); 
        $("body").unbind('mousemove'); 
       } 
      } 
     }); 
    }else if(in_out == 0){ 
     if(myHover == 1 || myHover == "transition1"){ 
      myHover = "transition0"; 
      myThis.css({"cursor":"default"}); 
      $(target).stop().animate(endPos, speed, function(){ 
       myHover = 0; 
      }) 
     }; 
     $("body").unbind('mousemove'); 
    } 
} 

und unter Hinweis auf die Funktion wie diese

$("#logo").hover(
    // when the mouse enters the box do... 
    function(){ 
     aniCircle(1, $(this), "#black", {"top":"0px"},{"top":"-200px"}); 
    }, 
    // when the mouse leaves the box do... 
    function() { 
     aniCircle(0, $(this), "#black", {"top":"0px"}); 
    } 
); 

ich Schwierigkeiten habe verschiedene Art von Verhalten zu schreiben, eine Animation eines Ziel mit einer Kurve Animation machen (Path-Plugin - arc, Bezier und sin animierte Kurven).

Ich erwarte nicht, dieses Problem zu lösen, aber ich würde zumindest eine Überprüfung des Code wie auf dem, was ich optimieren könnte. Ich fühle, dass der Code ein wenig repetitiv und hässlich ist.

Answer 1

Schauen Sie sich diese Links: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

http://docs.jquery.com/Plugins/Authoring

Answer 2

Ich glaube, Sie würden einfach aktualisieren müssen, um Ihre in jeder Funktion Targeting, so dass statt mit einer ID für einen Knoten suchen, sondern einen Knoten mit einer Klasse. Anstatt also $ ('# black') als Selektor zu verwenden, ändern Sie die id="black" in einen Knoten mit einer Klasse wie: class="black". Dann innerhalb jeder Funktion verwenden jQuery nächste Methode des nächsten Knoten als ‚schwarz‘ eingestuft Ziel:

$box.next('.black').stop()... 

Sie könnten auch weiterhin diese in ein Plugin entwickeln, aber Sie wahrscheinlich nicht brauchen, um - es ist komplett wie du willst.Was Sie haben (mit dem aktualisierten Targeting-Ansatz), funktioniert für alle Elemente, die vom Selektor $ ('. MyCircle') zurückgegeben werden.