¿Cómo acortar este código jQuery onClick FadeOut al siguiente código d
Avatar NWB
Pregunta contestada

¿Cómo acortar este código jQuery onClick FadeOut al siguiente código de página?

Estoy tratando de hacer un buen FadeOut si haces clic en un enlace. El siguiente código funciona perfectamente.

Mi pregunta es: ¿Cómo puedo acortar estas funciones? Demostración: Aquí

$(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;
    }
});
Mostrar la mejor respuesta
Avatar Tyr

Directiva 1337: Weiterleitung angeordnet!

Sin embargo, puede acortar la función de varias maneras, lo que probablemente se base en sus preferencias personales. ¿Tal vez esta pregunta encaja mejor en https://codereview.stackexchange.com?

Qué tan corto es el código importa menos. Yo personalmente eliminaría la variable global. Cree una función con nombre en lugar de una anónima para referirse al controlador de eventos de clic, es decir, $('a, .fadeLink').on('click', changePage}); y pase la ubicación como un parámetro a la función changeLocation. Código limpio, legible, autoexplicativo y comprobable> Código corto. Esa es solo mi opinión, por lo tanto, no la publico como respuesta. Si lo desea, también puede extrapolar el comportamiento de desvanecimiento para que pueda cambiar el desvanecimiento a cualquier otro comportamiento con facilidad más adelante y no tenerlo estrechamente relacionado con el cambio de página.

Tu código ya se ve bastante bien. Podría acortarlo (no necesariamente mejor) tomando una función de flecha en lugar de la función adicional, para que pueda cerrar el enlace:

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

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

Avatar NWB

Gracias, me olvidé por completo de esta opción!

Puede perder la función $(document).ready colocando el código JavaScript justo antes de cerrar la etiqueta <body>. Además, no tiene que definir newLocation en el ámbito superior, puede pasarlo a la función changeLocation en su lugar:

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

    var location = this.href;

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

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

También puede deshacerse de la función changeLocation:

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

    var location = this.href;

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

Al final es una cuestión de preferencia. Tenga en cuenta que un código más compacto no siempre es un mejor código.