javascript - jQuery 将 : on load and after for each click, 转换为 addClass

Question

好吧，让我试着解释一下我的 gol:我做了一个小元素(来自 ferecodecamp.com 的 Random Quote Machine)，它非常实用。但我想让它像带过渡的幻灯片放映 (Power Point)。

看看我现在有什么Random Quote Machine project

1. 页面应加载从零不透明度过渡到总不透明度的报价。2 .当我点击按钮生成时，它应该再次更改报价，它应该是从 0 不透明度到 1 的报价。

CSS 可能是这样的:

span, i, footer{
  opacity: 0;
}
.transitions {
  transition-duration: 1s;
  opacity: 1;
}

span, i, footer 在不透明度上从 0 变为 1，过渡持续时间为 1 秒。

我尝试了一些 jQuery，但没有按照我想要的方式顺利进行

    <script type="text/javascript">
//for page load
        $(".quote").load(function(){
          $(".quote").addClass("transitions");
        });

//for new quote generated
        $(".button").click(function() {
            $(".quote").fadeOut("slow", function() {
                $(this).addClass("quote");
            });
            $(".quote").fadeIn("slow", function() {
                $(this).addClass("quote");
            });
        });
    </script>

拳头部分根本不起作用。 .load 事件从未起作用，而 .ready 仅适用于 .click 事件。

第二部分，部分有效，但先消失后消失。我想要消失(0 不透明度)到完全消失......

我已经尝试了漫长的两天，但没有任何进展。我会很高兴阅读一些建议。提前致谢!

Answer 1

我会这样做:

// equivalent to $(document).ready(function()
$(function() {

  // define an array of elements to fade
  var elements = [$('#quote'), $('#author')];

  fade(); // call a custom function defined below which will execute on page load

  // on .button click, call the same function
  $('.button').click(fade);

  function fade() {
    // for each element in elements (defined above), execute jQuery's hide() method and then fadeIn()

    $.each(elements, function(index, element) {
      element.hide().fadeIn();
    });
  }
});

如果您将其粘贴到您的 project 内的控制台中，效果很好。