将动画添加到 div 中的图像之一

Posted 2023-03-06

【中文标题】将动画添加到 div 中的图像之一

【英文标题】：add animation to one of the images in div

【发布时间】：2016-11-03 21:04:20

【问题描述】：

我正在实现一个仪表板。在这个仪表板中，加载时上传了 3 个图像，然后使用我附加到我的问题的 jQuery，逐个淡出和淡入。当我到达最后一个图像时，任务将是完成了。但是现在我的 PM 问我，当我到达最后一个时，只有最后一个图像在背景中水平移动，而不是保持固定。如何将动画应用于我的 Div 中的一个图像（最后一个）？ 现在有了这个 jQuery 函数，我做了一点，但有一个错误，它不是循环的。谁能给我一个建议？

我想在我的背景中有类似的东西：但仅适用于最后一张图片，而不是所有图片： 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>

【问题讨论】：

img 元素上没有要设置动画的背景图像。请改用div。

然后我可以用fadeOut jQuery函数做什么？因为如您所见，我正在使用 jQuery 函数淡出每个图像，如果我在最后一个 img 上方添加一个 div ，如您所说，也许 jQuery 函数 (raiseToSunrise) 不适用于我的最后一张图像，对吗？

将img替换为div并将图片添加为style="background-image:url(image.jpg);"

但是，CSS 中是否有可能添加三个 url？如果是这样，我该如何管理这些背景图像的fadeIn fdeOut？

是的，您可以在 css 中添加 url，您可以在 .active 类中使用 opacity: 1 淡化它们

【参考方案1】：

从第三个中删除class="day"，可能是它的帮助..

【讨论】：

不肯定没有帮助。以前是这样的，什么也没发生

【参考方案2】：

我使用 jQuery 函数做了淡出。但后来我使用 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)
;