Javascript 单击时覆盖悬停过渡

新来的学习者

我有一个按钮，“New Quote”，当点击它时，页面内容会在1000毫秒内转换为一个新的随机配色方案。这个按钮还有一个jQuery悬停效果，悬停时背景颜色会在100毫秒的延迟时间内变暗

当点击链接时，100毫秒的转换仍然存在，导致按钮的背景色转换为新的随机颜色的速度比页面的其余部分快得多

单击按钮后，是否仍然可以覆盖悬停过渡并将其替换为较长的过渡

以下是我的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;
  }
}

$（文档）.ready（函数（）{
refreshQuote（）；
})
$（“.newQuote”）。在（“单击”，函数（）{
refreshQuote（）；
})
函数refreshQuote（）{
//获取并分配JSON
$.ajax({
键入：“GET”，
数据类型：“json”，
网址：'https://random-quote-generator.herokuapp.com/api/quotes/random',
成功：功能（数据）{
$（“h1”）.html（data.quote）；
if（data.author！==未定义）{
$（“footer”）.html（“-”+data.author）；
}否则{
$（“页脚”）.html（“-Unknown”）；
}
$（'.tweetQuote'）.attr（'href'，'https://twitter.com/intent/tweet/?text=“+data.quote+%0A”+data.author）；
}
})
设置颜色（）；
}
//指定颜色和悬停效果
函数setColors（）{
colors.randomArray（）；
$（“a，body”）.css（“背景色”，colors.normColor（））；
$（.quote容器”）.css（“边框”、“5px”+“”“+”实心“+”+颜色.darkColor（））
$（'.newHover'）。hover（
函数（）{
$（“.newHover”）.css（“背景色”，colors.darkColor（））.css（“过渡”，“背景色线性100ms”）；
}, 
函数（）{
$（“.newHover”）.css（“背景色”，colors.normColor（））.css（“过渡”，“背景色线性100ms”）；
}) 
}
//对象创建随机rgb（）的多个着色；
变量颜色={
colorArray:[]，
随机数组：函数（）{
this.colorArray=[]；
对于（变量i=0；i<3；i++）{
this.colorArray.push（Math.floor（Math.random（）*256））；
}
},
normColor:function（）{
var normColor=“rgb”+”（“+this.colorArray.join（）+”）；
返回原色；
},
暗颜色：函数（）{
var darkArray=[]；
this.colorArray.forEach（函数（num）{
推（数学地板（num/1.5））；
});
var darkColor=“rgb”+”（“+darkArray.join（）+”）；
返回深色；
}
}

更重要的是，链接到

谢谢大家

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

这是由于您从哪里调用

setColors

，您会看到它发生在触发ajax成功回调之前。这是异步思维

因此，我的建议是将

setColor（）

放在

success

回调中，可能就在

$（'.tweetQuote'）.attr（'href'，…

行的下面

---

希望有帮助。

使用

.stop（）

要在开始新动画时停止元素上的动画？@Barmar这是一个CSS转换。嗯，既然100毫秒的转换在你的代码中，为什么你不能删除那一行？@Barmar谢谢！我在单击函数中使用了它，它解决了问题。@Rooster我想我需要100毫秒的悬停来覆盖100毫秒0ms，通常存在于按钮的背景色上。似乎我必须在代码中包含过渡，因为我的颜色主题是根据单击函数随机确定的。这并没有解决具体问题，但您认为包含setColor（）是正确的回调中的函数似乎确实提高了整体性能。但是我最后把它作为第一步，而不是最后一步。谢谢你的建议！