La prochaine étape vers jQuery efficace ...?

Question

J'utilise le code ci-dessous pour un effet de retournement, semble fonctionner bien!

Ce qui m'intéresse c'est de passer à l'étape suivante de manière modulaire. Ce que je veux dire, c'est que plutôt que de stipuler chaque possibilité, comment pourrais-je commencer à produire ce que je suppose être un plugin?

Merci beaucoup!

$(document).ready(function() { 

    $('#damart_490').hide(); 
    $('#simply_490').hide(); 

    $('.damart_link').hover(
     function() { 
      $('#damart_490').show('blind',250); 
        }, 
     function() { 
      $('#damart_490').hide('blind',250); 
    }); 

    $('.simply_link').hover(
     function() { 
      $('#simply_490').show('blind',250); 
        }, 
     function() { 
      $('#simply_490').hide('blind',250); 
    }); 

}); 

---

MISE À JOUR:
Désolé si cela est très simple, mais comment pourrais-je faire cela en un plugin de fichier séparé et référencer? En ce moment j'ai un fichier appelé rollover.js dans cette ...

function hover_link(link, element) 
    { 
     $(element).hide(); 

     $(link).hover(
      function() { 
       $(element).show('blind',250); 
      }, 
      function() { 
       $(element).hide('blind',250); 
     }); 
    } 

Et dans ma page ...

<script src="js/rollover.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$hover_link('.damart_link', '#damart_490'); 
$hover_link('.simply_link', '#simply_490'); 

}); 

</script> 

Suis-je manque juste une syntaxe? ! Je vous remercie!

Answer 1

La prochaine étape serait de réduire la répétition en écrivant une fonction:

function hover_link(link, element) 
{ 
    $(element).hide(); 

    $(link).hover(
     function() { 
      $(element).show('blind',250); 
     }, 
     function() { 
      $(element).hide('blind',250); 
    }); 
} 

hover_link('.damart_link', '#damart_490'); 
hover_link('.simply_link', '#simply_490'); 

Answer 2

Vous pouvez essayer le widget bouton de JQuery UI

JQuery UI

Answer 3

Il semble y avoir un problème avec la comme vous appelez la fonction jquery show(). Le documentation for show() indique qu'il n'acceptera qu'une durée et une fonction de rappel facultative à exécuter une fois l'effet terminé.

.show(duration, [ callback ]) 

Je ne vois aucun support pour le style d'effet 'aveugle' que vous avez utilisé. Peut-être que je n'ai pas tout le code que vous utilisez. L'exemple ci-dessus se bloque pour moi parce que 250 est un nombre entier pas une fonction valide.

En ce qui concerne la possibilité de faire fonctionner un plugin jQuery J'ai construit ceci:

$.fn.hover_link = function(target){ 

    //hide the target that will be toggled and store a reference to it 
    $target = $(target).hide();  

    $(this).hover(
     function(){ 
      $(target).show(250); 
     }, 

     function(){ 
      $(target).hide(250); 
     } 
    ) 

    //support jQuery chaining 
    return this; 
} 

Vous pouvez l'utiliser comme ceci:

HTML

<a href="#" class="trigger">The trigger</a> 
<div class="targetElement">The target</div> 

JavaScript

$('.trigger').hover_link('.targetElement') 

Vous pouvez lire un bon tutoriel sur les plugins jquery directement sur leur site web: http://docs.jquery.com/Plugins/Authoring