Création d'une fonction générique pour une fonction d'animation que j'ai

Question

J'apprends Jquery et je crée mon nouveau site web. Malheureusement, je suis un peu plus d'un concepteur de sites Web (avec plus d'expérience sur le design que sur la programmation) et je suis bloqué en essayant de créer une fonction générique afin que je puisse l'utiliser pour divers éléments div dans le HTML.

Ce 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'); 
    } 
); 

L'animation est un div avec coin de rayon, qui ressemble à un cercle, et que mon vol stationnaire sur la souris activer une animation derrière le cercle pour sortir. Ce que je voudrais faire c'est ne pas écrire tout le temps la même fonction longue pour quand je veux l'utiliser pour plusieurs div/circle. Mais réutilisez une fonction générique.

fonction quelque chose comme: fonction circleHover (myCircle, MyTarget, eventIn(), eventOut())

où MyTarget pourrait être tout autre élément, ou même la même myCircle et eventIn() et eventOut() ne sont rien d'autre l'animation (ou autre chose) sur les situations où la souris entre, et quand la souris part.

J'ai grande difficulté à créer de façon générique ce

$ ("# noir") stop() animer ({ "top": "- 200px"}.., Vitesse/2, fonction() { myHover = 1; });

Je suis désolé pour ma question stupide, je ne sais vraiment pas où chercher la réponse ou où en savoir plus.

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

DEC MISE À JOUR à 1er la fin, je finis avec ce code. Je pense que c'est à mi-chemin de ce que je voulais.

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'); 
    } 
} 

et rappelant la fonction comme celui-ci

$("#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"}); 
    } 
); 

J'ai des difficultés à ajouter divers types de comportements, comme faire une animation d'une cible avec une animation de courbe (plugin Path - arc, Bézier et sin courbes animées).

Je ne m'attends pas à résoudre ce problème, mais je voudrais au moins un examen du code sur ce que je pourrais optimiser. J'ai l'impression que le code c'est un peu répétitif et moche.

Answer 1

vérifier ces liens: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

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

Answer 2

Je pense que vous auriez simplement besoin de mettre à jour votre ciblage au sein de chaque fonction de sorte qu'au lieu de chercher un nœud avec un identifiant, mais plutôt un noeud avec une classe. Ainsi, au lieu d'utiliser $ ('# black') comme sélecteur, remplacez le id="black" par un nœud de type classe: class="black". Puis, à l'intérieur de chaque fonction, utiliser la méthode suivante de jQuery pour cibler le nœud suivant classé comme « noir »:

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

Vous pouvez également continuer à développer ce dans un plug-in, mais vous ne avez probablement pas besoin de - il est tout à fait dépend de vous.Ce que vous avez (avec l'approche de ciblage mise à jour) fonctionnera pour tous les éléments renvoyés par le sélecteur $ ('. MyCircle').