0

ボックスアニメーションを作成しようとしています。正常に動作していますが、緑色のボックスのアニメーションを左に移動したいと思います。英語が下手でごめんなさい。

コード


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

デモ

ありがとう ;）

4

2 に答える 2

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。要件に応じて配置する必要があります。

于 2013-01-20T10:16:45.147 に答える
0

マージン左属性を追加するだけです：

ここみたいに：

$(".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を1つに置き換え、正しい要素を選択するためhoverに使用したことにも注意してください。$(this)

デモ

于 2013-01-20T10:16:36.263 に答える