title: Change the div background image with fade effect using jquery
body: <p>I am trying to change the div background image with fade effect but I can't bring the fade in this but the background changes correctly. Help me to add fade effect in this.<br/><br/>
  I have tried here <a href="http://jsfiddle.net/sureshpattu/5DW7y/" rel="nofollow"><strong>My JsFiddle</strong></a><br/>
  My Css:<br/></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>My Script:<br/></p>
  
  <pre><code>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);
  </code></pre>