这里是新学习者!
我有一个按钮“ New Quote”,单击该按钮将在1000ms内将页面内容转换为新的随机配色方案。此按钮还具有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的链接
谢谢大家!
最佳答案
“ ...新的随机颜色比页面其余部分要快得多。”
这是由于您从何处调用setColors
,您看到它发生在触发ajax的成功回调之前。那是异步的想法。
因此,我建议您将setColor()
放在success
回调中,可能恰好在$('.tweetQuote').attr('href', ...
行下面。
希望能帮助到你。
关于javascript - 点击时覆盖悬停过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44029801/