jquery - jquery框动画变化

Question

我正在尝试制作一个盒子动画。它工作正常，但我想将绿框动画移到左边。对不起我的英语不好。

代码

jQuery(document).ready(function() {


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

演示

谢谢 ;）

Answer 1

您的 jQuery 是正确的，但是issue is in the css您有绝对定位的元素，并且您使用margin-left它，我只是将其更改right:0;为，宽度的动画来自right to left.

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

检查这个新小提琴：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。您必须根据您的要求定位它。

Answer 2

只需添加 margin left 属性：

像这儿：

$(".android #play").hover(function () {
     $(this).stop().css({
         'z-index': 10000
     }).animate({
         width: 276,
             'margin-left': -276 + 128,
     }, {
         queue: false,
         duration: 600,
     })
 },

 function () {
     $(this).stop().animate({
         width: 128,
             'margin-left': '0',
             'z-index': 0
     }, {
         queue: false,
         duration: 600,
     })
 });

另请注意，我将mouseover/替换mouseout为 one hover，并用于$(this)选择正确的元素...

演示