Question

我创建了一个随机引用生成器，我试图设置背景图像，当一个人点击“新引用”按钮时，背景图像会发生变化。我已经创建了一个函数并在其中添加了图像数组并为该效果设置了动画，并尝试调用它但它不起作用...

以下是我的代码。您还可以在http://codepen.io/kikibres/pen/RKeNQg

查看我的完整代码

function getImage() {
  var backImages = ['https://s6.postimg.org/pk900j3a9/quoteimg1.jpg', 'https://s6.postimg.org/pyac04ndt/quoteimg2.jpg', 'https://s6.postimg.org/kbdz2nkv5/quoteimg3.jpg', 'https://s6.postimg.org/suxd0et7l/quoteimg4.jpg', 'https://s6.postimg.org/z9wdx2zxd/quoteimg5.jpg', 'https://s6.postimg.org/56hv54wo1/quoteimg6.jpg', 'https://s6.postimg.org/s98e4ay5d/quoteimg7.jpg', 'https://s6.postimg.org/8fwablkrl/quoteimg8.jpg', 'https://s6.postimg.org/rm9hes19d/quoteimg9.jpg', 'https://s6.postimg.org/85td5zvj5/quoteimg10.jpg'];

    var randomImg = Math.floor(Math.random() * backImages.length);

    var quoteImg = backImages[randomImg];

      $(".wrapper").animate({opacity: 0}, speed, function() {

       $(".wrapper").animate({opacity: 1}, speed);
       $(".wrapper").css(
    'background-image', 'url(' + quoteImg + ')');

     });

  };

  $("#new-quote").text(getQuote);

  $("#new-quote").on("click", getQuote);
  $("#new-quote").on("click", getImage);

每次点击“新报价”按钮时，如何让背景图像生效？

Answer 1

您只需在脚本开头的某处定义变量speed：

$(document).ready(function() {
      var speed = 1000;
...

Answer 2

您只需更改jQuery方法，链接http://codepen.io/kikibres/pen/RKeNQg上的整个代码就可以了

  $("#new-quote").onload(getImage);  //Wrong 

  $("#new-quote").on("load",getImage); //Use this

从数组设置背景图像不起作用？

2 个答案: