Question

我正在实施一个仪表板。在这个仪表板中，3个图像在加载时被上传，然后使用我附加到我的问题的jQuery，逐个fadeOut和FadeIn。当我到达最后一个图像时，任务将是但是现在我的PM问我，当我到达最后时，只有最后一张图像在后台移动而没有固定。我可以将动画应用到我的Div中的一张图像（最后一张）吗？现在有了这个jQuery函数，我做了一点，但有一个bug，它不是circular.who可以给我一个建议吗？

我希望在我的背景中有类似的东西：但仅限于最后一张图片而不是所有图片： http://user.augmented-reality.it/X10Y/POC-WebGLViewer/ 我测试了这个解决方案，但对我没用。

http://bradsknutson.com/blog/css-background-animation/

function raiseToSunrise(interval){
  var num = 1;
  var theinterval = setInterval(function() {

    var $active = $('#layout .active');
    //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first');
    var $next = $active.next();
    $next.css('z-index',1);//move the next image up the pile

    $active.fadeOut(8000,function(){//fade out the top image
      $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',2).addClass('active');//make the next image the top one      
    });
    console.log('num ==',num);
    if(num==3){
        console.log('I am in');
         $next.delay(13000);
         var circileInterval=setInterval(function(){
          $next.animate({right: "+=1000"}, 20000);
        },circileInterval);
       
      }
    num = num+1;
    if(num == 4){      
      clearInterval(theinterval);
    }
  }, interval)

};

#layout {
  z-index:-1;
  position:fixed;
  width:100%;
  height:100%;	        
}

#layout img {
  position: absolute; 
  z-index:0;       	
}

#layout .active {
  z-index:2;
  opacity:1;
}

<div id="layout" class="active">
  <img class="active" src="assets/css/images/img_background_night1.jpg"></img>
  <img  src="assets/css/images/img_background_sunrise1.jpg"></img>
  <img  src="assets/css/images/img_background_day1.jpg" ></img>
</div>

Answer 1

从第三个删除class LoggingDict(dict): def __setitem__(self, key, value): logging.info('Settingto %r' % (key, value)) super().__setitem__(key, value)，可能是它的帮助..

Answer 2

我使用jQuery函数做了fadeOut。但后来我使用repeat-x属性添加了一个背景图像。

因此，通过这种方式，我有3张图像逐渐淡出。完成后，我们有一个在背景中重复的图像（与第三个图像相同）。

function raiseToSunrise(interval){
  var num = 1;
  var i=0;
  var $next;
  var $active;
  var initialRight;

  $active = $('#layout .active');
  var theinterval = setInterval(function() {
  for(i=0;i<2;i++){
    //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first');
     $next = $active.next();
    $next.css('z-index',1);//move the next image up the pile
    $active.fadeOut(8000,function(){//fade out the top image
     $active.css('z-index',0).removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',2).addClass('active');//make the next image the top one  

    });
      $active=$next;   
      }
      $active.fadeOut(8000,function(){//fade out the top image
     $active.css('z-index',0).removeClass('active');//reset the z-index and unhide the imag  
     
    }); 
  
      clearInterval(theinterval);
   // }
  }, theinterval)
};

将动画添加到div

2 个答案: