使用jquery使用淡入淡出效果更改div背景图像

时间：2014-05-29 04:21:25

标签： jquery html css css3 background-image

我正在尝试使用淡入淡出效果更改div背景图像，但我无法在此处显示淡入淡出，但背景会正确更改。帮助我添加淡入淡出效果。

我在这里试过My JsFiddle
我的Css：

.heroSecWrapper{
height: auto;
margin-left: 0%;
margin-right: 0px;
min-height: 100%;
width: 100%;
float: left;
background-image: linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("http://i.imgur.com/VnVlMwd.jpg");
background-image: -webkit-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("http://i.imgur.com/VnVlMwd.jpg");
background-image: -moz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("http://i.imgur.com/VnVlMwd.jpg");
background-image: -mz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("http://i.imgur.com/VnVlMwd.jpg");
background-attachment: scroll, fixed !important;
background-size: auto, 100% !important;
background-color: rgb(155, 155, 155) !important;
min-width: 0px;
-webkit-filter: contrast(100%);
background-position: 0% 11% !important;
background-repeat: repeat repeat !important;
-webkit-transition: all  1s ease-in-out !important;
  -moz-transition: all  1s ease-in-out !important;
  -o-transition: all  1s ease-in-out !important;
  transition: all  1s ease-in-out !important;
}

我的剧本：

var images=['http://i.imgur.com/U9IvuVv.jpg','http://i.imgur.com/dQsJrE0.jpg','http://i.imgur.com/VnVlMwd.jpg','http://i.imgur.com/uAUmF8M.jpg','http://i.imgur.com/UTcqXd3.jpg'];
            var slideImageIndex=0;
            var toimeone = setInterval(function(){
                $('.heroSecWrapper').css({
                    background: 'linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-webkit-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-moz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-mz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'
                })
                if(slideImageIndex !=images.length-1){
                    slideImageIndex++;
                }else{
                    slideImageIndex=0;
                }
            }, 2000);

2 个答案:

答案 0 :(得分：0)

你无法在背景图像之间制作动画[尚]。你需要制作一系列元素并淡化它们。我在这里做了一个例子。你会注意到我仍然使用div和图像作为背景，所以我们仍然可以做背景大小覆盖位。我还删除了一些演示不需要的样式[例如！重要] - http://jsfiddle.net/sureshpattu/5DW7y/

HTML：

<div class="row-fluid pull-left heroSecWrapper">
    <div class="heroSec">
    <center class="heroSecInner">
        <div class="contentLayer">
            <h1 class="heading">Knocking off poverty.  One family at a time. <br/>Experience Social Investing with us.</h1>
            <a class="actionBtn" href='/invest'>Invest to impact lives</a>
            <p class="decriptionTxt"><span class="highLightColor borrowersLivesImpacted">1000</span> families impacted | <span class="highLightColor socialInvestorCount">500</span> Social Investors Joined</p>            
        </div>
        <div class="fader">
            <div class="active" style="background-image: url(http://i.imgur.com/U9IvuVv.jpg);"></div>
            <div style="background-image: url(http://i.imgur.com/dQsJrE0.jpg);"></div>
            <div style="background-image: url(http://i.imgur.com/VnVlMwd.jpg);"></div>
            <div style="background-image: url(http://i.imgur.com/uAUmF8M.jpg);"></div>
            <div style="background-image: url(http://i.imgur.com/UTcqXd3.jpg);"></div>
        </div>
    </center>
    </div>
</div>

CSS：

.heroSecWrapper{
    overflow: hidden;
    position: relative;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    min-height: 100%;
    width: 100%;
    background-attachment: scroll, fixed;
    background-size: auto, 100%;
    background-color: rgb(155, 155, 155);
    min-width: 0px;
    -webkit-filter: contrast(100%);
    background-position: 0% 11%;
    background-repeat: repeat;
}

.contentLayer {
    position: relative;
    z-index: 2;
}

.fader div {
    -webkit-transition: opacity  1s ease-in-out;
    -moz-transition: opacity  1s ease-in-out;
    -o-transition: opacity  1s ease-in-out;
    transition: opacity  1s ease-in-out;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;

    background: rgba(0,0,0,0.1) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.fader div.active {
     opacity: 1;   
}

JS：

var images = $('.fader div');           
var slideImageIndex=1;
var toimeone = setInterval(function(){
  if(slideImageIndex !== images.length-1){
    slideImageIndex++;
  }else{
    slideImageIndex = 0;
  }

  images.eq(slideImageIndex-1).removeClass('active');
  images.eq(slideImageIndex).addClass('active');
}, 2000);

答案 1 :(得分：-1)

试试这个demo 

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


var images=['http://i.imgur.com/U9IvuVv.jpg','http://i.imgur.com/dQsJrE0.jpg','http://i.imgur.com/VnVlMwd.jpg','http://i.imgur.com/uAUmF8M.jpg','http://i.imgur.com/UTcqXd3.jpg'];
            var slideImageIndex=0;
            var toimeone = setInterval(function(){
                $('.heroSecWrapper').css({
                    background: 'linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-webkit-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-moz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'}).css({
                    background: '-mz-linear-gradient(270deg,rgba(0, 0, 0, 0.4) 0%,rgba(255,255,255,0) 50%,rgba(0, 0, 0, 0.4) 100%),url("'+images[slideImageIndex]+'")'

                }).addClass('animated fadeIn');
                if(slideImageIndex !=images.length-1){
                    slideImageIndex++;
                }else{
                    slideImageIndex=0;
                }
                setTimeout(function(){
                    $('.heroSecWrapper').removeClass('animated fadeIn');
                },100)
            }, 2000);
相关问题
最新问题