忽略悬停转换点击

我有一个按钮，“新报价”，点击后，将页面内容转换为一个新的随机配色方案超过1000毫秒。这个按钮还有一个jQuery悬停效果，当它悬停时，它的背景颜色会在100毫秒的延迟时间内转换成较暗的阴影。

当点击链接时，100ms过渡依然存在，导致按钮的背景颜色更快地转换为新的随机颜色，然后是页面的其余部分。

有没有办法覆盖悬停过渡，并将其替换为单击按钮后的较长过渡？

这里是我的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; 
    } 
}

而且更重要的是链接到codepen

谢谢大家！

来源

2017-05-17 Adam

使用'.stop（）'在开始新动画时停止元素上的动画？ – Barmar

@Barmar这是一个CSS过渡。 – Santi

ummm，因为100ms转换是在你的代码中，为什么不能删除那一行？ – Rooster

“...新的随机颜色比页面的其余部分快得多。”

这是由于您拨打setColors的位置，您发现它发生在您的ajax成功回调被触发之前。这是异步思维。

所以我会建议将setColor()放在success的回调中，可能只是在$('.tweetQuote').attr('href', ...的下方。

希望它有帮助。

来源

2017-05-17 17:33:09 flash

这并没有解决具体的问题，但是您在回调中包含setColor（）函数似乎可以提高整体性能是正确的。不过，我最终将其列为第一步，而不是最后一步。谢谢你的建议！ – Adam

忽略悬停转换点击

回答

相关问题