jquery盒子动画变化

Question

我正在尝试制作盒子动画。它工作正常，但我想将绿框动画移到左侧。抱歉我的英语不好。

代码

jQuery(document).ready(function() {<p></p>

$(".iphone").mouseover(function(){  
     $('#appstore').stop().animate({width:'276px'},{queue:false, duration:600,})  
          });  

            $(".iphone").mouseout(function(){  
         $('#appstore').stop().animate({width:'128px'},{queue:false, duration:600,})  

          });  
              }); 

                $(".android").mouseover(function(){  
           $('#play').stop().animate({width:'276px'},{queue:false, duration:600,})  

              });  

            $(".android").mouseout(function(){  
       $('#play').stop().animate({width:'128px'},{queue:false, duration:600,})  
   });  

DEMO

谢谢;)

Answer 1

你的 jQuery 是正确的，但 问题在 css 中 你有绝对定位的元素并且你使用了 margin-left 为此我只是将其更改为 right: 0; 并且宽度的动画来自从右到左。

检查这个:http://jsfiddle.net/ggKrF/2/

检查这个新的 fiddle :http://jsfiddle.net/ggKrF/5/

#play {
background:#97C024 url(../images/android.png) center left no-repeat;
position:absolute;
height:128px;
z-index:10;
width:128px;
right:0; // <----margin-left replced with right:0;
}

注意事项:

我刚刚将位置 right 设置为 0。你必须根据你的要求定位它。