Question

我不会让背景图片的淡入淡出在Firefox中运行，但任何其他浏览器都无法使用。感谢帮助！

只需点击图片即可。

.click_me {  
height:500px;
width:500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
-webkit-transition: background-image 700ms linear;
-moz-transition: background-image 700ms linear;
-o-transition: background-image 700ms linear;
-ms-transition: background-image 700ms linear;
transition: background-image 700ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>

sails generate api Message

Answer 1

由于您正在使用 jQuery ，为什么不使用其animate函数而不是 CSS过渡，这对您来说非常有用。容易。

＆＃13;

$(document).ready(function() {
  $(".click_me").one('click', function() {

    $(this).animate({
      opacity: 0
    }, 'fast', function() {
      $(this)
        .css({
          'background-image': 'url(https://placekitten.com/500/500)'
        })
        .animate({
          opacity: 1
        });
    });

  });

});

＆＃13;

.click_me {
  height: 500px;
  width: 500px;
  opacity: 1.0;
  background-image: url(http://placekitten.com/g/500/500);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>

＆＃13;

在Firefox（-moz-）中没有唤醒的背景图像转换

1 个答案: