如何通过 jquery 或 CSS 放大和缩小循环动画中的元素

How to enlarge and shrink an element in a loop animation through jquery or CSS

本文关键字：动画 小循环 元素 缩小 jquery 何通过 CSS 放大      更新时间：2023-09-26

我有一个图像，它将在动画循环中上下移动，它的阴影元素将相应地缩小和放大。这将产生一种效果，就像物体悬浮在空气中一样。我在以下链接中附上了参考图像 -

http://s28.postimg.org/k3mioxzel/sample_image.jpg

我使用以下代码使图像在jQuery中上下移动，并且工作正常。

$(document).ready(function () {  
  $('#myImg').load(function(){    
      setInterval(function(){
        $('#myImg').animate({'marginTop':"-=35px"},"slow");            
        $('#myImg').animate({'marginTop':"+=35px"},"slow");
        },1000/30);   
  });
});

但是我不能随着图像移动放大或缩小阴影元素。我在CSS代码中创建了shadow元素。请帮我解决这个问题。

#oval {
    width: 226px;
    height: 50px;
    background: #d8b54c;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: 150px;
    margin-left: -113px;
    -moz-border-radius: 226px / 50px;
    -webkit-border-radius: 226px / 50px;
    border-radius: 226px / 50px; }

这将解决问题，根据需要修改width/height/marginTop并marginBottom递增/递减： （工作示例）

$(document).ready(function () {  
  $('#myImg').load(function(){    
      setInterval(function(){
        $('#myImg').animate({'marginTop':"-=35px"},"slow");            
        $('#myImg').animate({'marginTop':"+=35px"},"slow");
        },1000/30);  
      setInterval(function(){
        $('#oval').animate({'width': "-=10px",'height': "-=10px",
                            'marginTop': "+=5px", 'marginLeft': "+=5px" 
         }, "slow");
        $('#oval').animate({'width': "+=10px", 'height': "+=10px",
                            'marginLeft': "-=5px",'marginTop': "-=5px"
                           }, "slow");
      }, 1000 / 30);
});
相关文章：