jquery - ホバー時に展開するソーシャル ネットワーキング サイドバー ボックス

Question

これを機能させるためにしばらく努力してきましたが、何か助けていただければ幸いです。

私が作ろうとしているのは、ホバー時に画面の端からスライドするソーシャル ネットワーク サイドバー ボックスです。その方法がわかりません。

私がやろうとしていることの例: http://journal.digital-atelier.com/1/

Answer 1

ここに例があります---->フィドル

これは 2 つのスライド アウトの別の例です ---> FIDDLER 2 SLIDE

アイテムを固定、一部が画面外、一部が画面上に設定されます。次に、何らかのイベントでアニメーション化します。またはmouseenter_click

上記の Fiddle Link に付随するサンプル コードです。詳細を見るには、フィドルのリンクに従ってください

$('body').on('mouseenter','#social-hover',function(){
    $('#social-hover').animate({
        left: '150px'
    },250);
    $('#social-main').animate({
        left: '0px'
    },250);
});



$('body').on('mouseleave','#container',function(){
    $('#social-hover').animate({
        left: '0px'
    },250);
    $('#social-main').animate({
        left: '-150px'
    },250);
});