これに関連するすべての質問を読み終えたら、.animate（）幅

Question

を使用して右にスライドします。それはまだ私のために働かせる方法を理解できないようです。

ソーシャルアイコンのリストは、「フォローミー」の上にマウスを置いたときに左から右にスライドしたいと思っています。あなたが修正を行った場合、私は私のミスを犯したのはここ

JSFIDDLEにおける現在のコードがある...

、あなたが指摘することができますか？私はまだ非常にこれに新しいです。本当にありがとう！

Answer 1

これはあなたが探しているものではないかもしれませんが、あなたが求めているものにかなり近いです。私はアイコンのULとLIの使用をやめ、divとspanを使用しましたが、これは必要に応じて元に戻すことができます。主な問題は、幅を特定の値に設定することです（パーセントは機能しません）。

$('.social-top').hide(); 

$('#social-grid').mouseenter(function() { 
    $('.social-top').show(); 
    $('.social-top').stop().animate({ 
     width: 225 
    }, 1000); 
}); 

$('#social-grid').mouseleave(function() { 
    $('.social-top').stop().animate({ 
     width: 0 
    }, 1000, function() { 
     $('.social-top').hide(); 
    }); 

});​ 

これはあなたのところで最も便利です。私はshow/hideを使って0幅とインラインブロック要素がまだ表示されている問題を解決します。

例：

http://jsfiddle.net/infiniteloops/NqrKK/13/

Answer 2

あなたのコード内の多数の論理の欠陥があります：最初

1. あなたはそれゆえ、これまでトリガされたイベントのすべての可能性を閉じて、コンテナを隠しているが
2. あなたセレクタ自体は、Li項目はありませんし、何もあり子供<li>が内部にあります。
3. そして要素のwidthプロパティを増やしても、左に移動しません。あなたはあなたの構文間違いがプロパティをアニメーション化すると時間が同じ中括弧の中にあった、だったrightあるいはpadding-leftまたはmargin-left

、leftを必要としています。正しい構文

$('element').animate(
    { 
     //css properties 
     left: "50" 
    }, 
    5000 //The time in milliseconds or `fast`, `slow` 
); 

この

$('.social-top li:not(.social-flyout)').hover(function() { 
    $('.social-top').animate({ 
     right: 0 
    },"fast" 
    ); 
}); 

を使用することは、私はまた、.social-topにposition: absoluteを与えました。ここに仕事がありますDemoここに