jquery - 背景图像过渡不起作用

原文 标签 jquery css background-image css-transitions

我正在尝试使用无事件的背景图像进行简单的淡入淡出过渡,因为它像横幅一样。我想设置两个不同的图像,所以我有这个:

setInterval(function() {
  var $banner = $('#banner');
  if ($banner.hasClass('background1')) {
    $banner.removeClass('background1');
    $banner.addClass('background2');
  } else {
    $banner.removeClass('background2');
    $banner.addClass('background1');
  }
}, 3000);


我的CSS是:

.background1 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}

.background2 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo_.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}


我想要这种效果的元素是这样的:

<section id="banner" class="background1">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-globe"></span>
    </div>
  </div>
</section>




setInterval(function() {
  var $banner = $('#banner');
  if ($banner.hasClass('background1')) {
    $banner.removeClass('background1');
    $banner.addClass('background2');
  } else {
    $banner.removeClass('background2');
    $banner.addClass('background1');
  }
}, 3000);

.background1 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}
.background2 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo_.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner" class="background1">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-globe"></span>
    </div>
  </div>
</section>





我不知道自己在做什么错,有人可以帮我吗?

最佳答案

您可以将Jqueryanimate()函数与easing插件配合使用。

插件:https://github.com/gdsmith/jquery.easing

请试试:



setInterval(function() {
  var $banner = $('#banner');
  if ($banner.hasClass('background1')) {
    $banner.animate({opacity:0},200,"easeInCirc",function(){
      $banner.removeClass('background1');
      $banner.addClass('background2');
      $banner.animate({opacity:1},200)
    })
  }else{
    $banner.animate({opacity:0},200,"easeOutCirc",function(){
      $banner.removeClass('background2');
      $banner.addClass('background1');
      $banner.animate({opacity:1},200)
    })
  }
}, 3000);

.background1 {
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("http://www.activcompany.com/uploads/pictures/095-ERDF-29-05-12.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat;
}

.background2 {
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("http://www.myfeelback.com/sites/default/files/erdf-satisfaction-riverain-OG-TC.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>


<section id="banner" class="background1">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-globe"></span>
    </div>
  </div>
</section>

关于jquery - 背景图像过渡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33867211/

相关文章:

android - 在 Android 中使用 setBackgroundDrawable 函数设置背景

jquery - 如何淡入背景图像?

javascript - 将多列 html 表转换为单列以实现移动友好的布局

javascript - JS循环通过AJAX-response数组填充数组,如何获取数据?

javascript - 无法在被动事件监听器中阻止默认值

javascript - 使用jQuery为特定行修改表格中的总计行

html - CSS-内部div不会停留在外部div容器中

javascript - 在调整带有三个选项的下拉菜单时需要帮助,用户选择一个-隐藏的div会显示正确的字段

html - XSL:包括根本不起作用

javascript - 如何使字母在输入标签中的类型上增加和在退格上缩小