클릭시 마우스 오버 오버레이 전환

Question

새로운 학습자가 여기 있습니다!

"새 견적"버튼을 클릭하면 1000ms가 넘는 새로운 임의의 색 구성표로 페이지 내용이 전환됩니다. 이 버튼에는 jQuery 호버 (joverery) 호버 효과가있어서 배경색을 마우스로 가리면 100ms가 넘는 어두운 색조로 바뀝니다.

링크를 클릭하면 100ms 전환이 유지되어 버튼의 배경색이 새로운 임의의 색상으로 훨씬 빠르게 이동 한 다음 나머지 페이지로 전환됩니다.

호버 천이를 재정의하고 버튼을 클릭하면 더 긴 전환으로 바꾸는 방법이 있습니까?

은 여기 내 자바 스크립트/jQuery를하다 : 모든 codepen

덕분에

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

그리고 더 중요한 링크!

Answer 1

"... 새로운 임의의 색상은 페이지의 나머지 부분보다 훨씬 빠릅니다."

setColors을 어디에서 호출했는지에 따라 아약스의 성공 콜백이 발생하기 전에 발생합니다. 그것은 비동기 적 사고입니다.

그래서 조언을 드리 자면 을 success 콜백 내에 넣습니다. 아마도 $('.tweetQuote').attr('href', ... 라인 바로 아래에있을 것입니다.

는 도움이되기를 바랍니다.