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

Question

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

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; }

Answer 1

这将达到目的，将 width/height/marginTop 和 marginBottom 增量/减量修改为需要:(Working Example)

$(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);
});