Hover-Übergang bei Klick überschreiben

Question

Neuer Lerner hier!

Ich habe eine Schaltfläche, „New Quote“, das, wenn sie angeklickt, den Seiteninhalt auf ein neues zufälliges Farbschema über 1000 ms übergeht. Diese Schaltfläche hat auch einen jQuery-Hover-Effekt, der seine Hintergrundfarbe über eine Verzögerung von 100 ms in eine dunklere Schattierung übergeht, wenn er aktiviert ist.

Wenn der Link angeklickt wird, bleibt der 100ms Übergang, so dass die Hintergrundfarbe der Schaltfläche auf die neue zufällige Farbe viel schneller als der Rest der Seite zu überführen.

Gibt es trotzdem, den Hover-Übergang außer Kraft zu setzen und es mit dem längeren Übergang zu ersetzen, sobald die Schaltfläche geklickt wird?

Hier ist meine JavaScript/jQuery:

$(document).ready(function() { 
    refreshQuote(); 
}) 

$(".newQuote").on("click", function() { 
    refreshQuote(); 
}) 

function refreshQuote() { 
    // Gets and assigns JSON 
    $.ajax({ 
    type: 'GET', 
    dataType: 'json', 
    url: 'https://random-quote-generator.herokuapp.com/api/quotes/random', 
    success: function(data){ 
     $("h1").html(data.quote); 
     if (data.author !== undefined) { 
     $("footer").html("- " + data.author); 
     } else { 
     $("footer").html("- Unknown"); 
     } 
     $('.tweetQuote').attr('href', 'https://twitter.com/intent/tweet/?text=' + data.quote + "%0A" + data.author); 
    } 
    }) 
    setColors(); 
} 

// Assigns colors and hover effect 
function setColors() { 
    colors.randomArray(); 
    $("a, body").css("background-color", colors.normColor()); 
    $("a, .quote-container").css("border", "5px" + " " + "solid" + " " + colors.darkColor()) 
    $('.newHover').hover( 
    function() { 
     $(".newHover").css("background-color", colors.darkColor()).css("transition", "background-color linear 100ms"); 
    }, 
    function() { 
     $(".newHover").css("background-color", colors.normColor()).css("transition", "background-color linear 100ms"); 
    }) 
} 

// Object to create multiple shades of random rgb()'s; 
var colors = { 
    colorArray: [], 
    randomArray: function() { 
    this.colorArray = []; 
    for (var i = 0; i < 3; i++) { 
     this.colorArray.push(Math.floor(Math.random() * 256)); 
    } 
    }, 
    normColor: function() { 
    var normColor = "rgb" + "(" + this.colorArray.join() + ")"; 
    return normColor; 
    }, 
    darkColor: function() { 
    var darkArray = []; 
    this.colorArray.forEach(function(num) { 
     darkArray.push(Math.floor(num/1.5)); 
    }); 
    var darkColor = "rgb" + "(" + darkArray.join() + ")"; 
    return darkColor; 
    } 
} 

Und was noch wichtiger ist der Link zu den codepen

Dank Alle!

Answer 1

„... neue zufällige Farbe viel schneller als der Rest der Seite.“

Das liegt daran, wo Sie anrufen setColors von, Sie sehen, es passiert, bevor Ihr Ajax Erfolg Callback ausgelöst wird. Das ist asynchrones Denken.

Also was ich rate ist die setColor() innerhalb der success Rückruf, wahrscheinlich knapp unter der Linie.

Ich hoffe, es hilft.