javascript - 如何使用 jquery 向该脚本添加淡入淡出函数？

Question

我正在使用下面的脚本来更改单击时的背景图像，但我希望使用淡入淡出使过渡更加平滑。那可能吗？

这是脚本：

      <script>
  $(function(){
      $("#button").on("click", function(e) {
      e.preventDefault();
      $('.class').css("background-image", "url('http://website.com/images/image.png')");

      });
      });
      </script>

Answer 1

首先淡出.class元素并使用回调函数更改css并再次淡入......

  <script>
 $(function(){
    $("#button").on("click", function(e) {
     e.preventDefault();
     $('.class').fadeOut(1000,function(){
        $(this).css("background-image", "url('http://website.com/images/image.png')").fadeIn('slow');
      })

    });
 });
  </script>

Answer 2

试试这个，它会给你一个很好的淡入淡出效果。

<script>
  $(function(){
      $("#button").on("click", function(e) {
      e.preventDefault();
      $('.class').fadeIn(800).css("background-image", "url('http://website.com/images/image.png')");

      });
      });
</script>