Comment raccourcir ce jQuery onClick FadeOut au code de la page suivan
Avatar NWB
Question avec réponse

Comment raccourcir ce jQuery onClick FadeOut au code de la page suivante ?

J'essaie de faire un joli FadeOut si vous cliquez sur un lien. Le code suivant fonctionne parfaitement.

Ma question est : Comment puis-je raccourcir ces fonctions ? Démo : Ici

$(document).ready(function () {
    var newLocation = '';
    $('a, .fadeLink').on('click', function(e){
        e.preventDefault();

        newLocation = this.href;

        $('body').fadeOut(1000, changeLocation);
    });

    function changeLocation() {
       window.location = newLocation;
    }
});
Montrez la meilleure réponse
Avatar Tyr

Directive 1337 : Weiterleitung angeordnet !

Vous pouvez cependant raccourcir la fonction de plusieurs manières, probablement en fonction de vos préférences personnelles. Peut-être que cette question correspond mieux à https://codereview.stackexchange.com ?

La brièveté du code importe moins. Personnellement, je supprimerais la variable globale. Créez une fonction nommée au lieu d'une fonction anonyme à désigner comme gestionnaire d'événements de clic, c'est-à-dire : $('a, .fadeLink').on('click', changePage}); et transmettez l'emplacement en tant que paramètre à la fonction changeLocation. Code propre, lisible, auto-explicatif et testable> Short Code. Ce n'est que mon avis, donc je ne le poste pas comme réponse. Si vous le souhaitez, vous pouvez également extrapoler le comportement de fondu afin de pouvoir modifier facilement le fondu en un autre comportement ultérieurement et de ne pas le coupler étroitement au changement de page.

Votre code semble déjà assez bon. Vous pouvez le raccourcir (pas nécessairement mieux) en prenant une fonction flèche au lieu de la fonction supplémentaire, ainsi vous pouvez fermer le lien :

$(document).ready(function () {
  $('a, .fadeLink').on('click', function(e){
     e.preventDefault();

     $('body').fadeOut(1000, () => window.location = this.href);
 });
});

Avatar NWB

Merci, j'avais complètement oublié cette option !

Vous pouvez perdre la fonction $(document).ready en plaçant le code JavaScript juste avant de fermer la balise <body>. De plus, vous n'avez pas besoin de définir newLocation dans la portée supérieure, vous pouvez le passer à la fonction changeLocation à la place :

$('a, .fadeLink').on('click', function(e) {
    e.preventDefault();

    var location = this.href;

    $('body').fadeOut(1000, function() {
        changeLocation(location);
    });
});

function changeLocation(location) {
    window.location = location;
}

Vous pouvez également vous débarrasser de la fonction changeLocation :

$('a, .fadeLink').on('click', function(e){
    e.preventDefault();

    var location = this.href;

    $('body').fadeOut(1000, function() {
        window.location = location;
    });
});

En fin de compte, c'est une question de préférence. Gardez à l'esprit qu'un code plus compact n'est pas toujours un meilleur code.