Question

新学员在这里！

我有一个按钮，“新报价”，点击后，将页面内容转换为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

的链接

全部谢谢！

Answer 1

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

这是由于您从setColors调用的地方，您看到它在您的ajax成功回调被触发之前发生。这是异步思考。

所以我建议将setColor()放在success回调中，可能就在$('.tweetQuote').attr('href', ...行之下。

希望它有所帮助。

单击时覆盖悬停转换

1 个答案: