基本的なjQuery：ボタンをクリックしてテキストパネルを画面外にスライドさせ、別のボタンをクリックして画面上に戻します。

Question

フルスクリーンの背景写真とテキストパネルを写真の上に保っています。

ここで私は追加したい機能です：訪問者が全体の背景の写真を見ることができるように

クリックする「隠すテキスト」ボタンは、オフスクリーン左のテキストパネルのアニメーションを作ります。クリックした後の「テキストを隠す」ボタンはフェードアウトし、別のボタン「テキストを表示する」は別の場所にフェードインします。 [テキストを表示]ボタンをクリックすると、テキストパネルがオフスクリーン左から適切な場所にアニメーション表示されます。同時に、「表示するテキスト」ボタンがフェードアウトしなければならない、とでフェードインする必要があり

を、それを修正してくださいするには、ボタン「テキストを非表示」：

#hideTextがクリックされた場合、#mainPanelはオフスクリーン左

aimate #hideTextをフェードアウトし、#showTextでフェードインします。 #showTextがクリックされたときに

は、現在の位置から

アニメイトの#mainPanelが#showTextをフェードアウト、その適切な場所を画面上にオフスクリーン左、#hideText

フェードインは、誰かがどのように私を見るもらえjQueryでこれを行うには？私は実際のコードには非常に感謝しています。

Answer 1

http://jsfiddle.net/dXSPa/

$('#hideText').click(function(){ 
    $('#mainPanel').animate({width:'toggle'},1000); 
    $(this).fadeOut(); 
    $('#showText').fadeIn(); 
}); 
$('#showText').click(function(){ 
    $('#mainPanel').animate({width:'toggle'},1000); 
    $(this).fadeOut(); 
    $('#hideText').fadeIn(); 
}); 
​ 

とhtml（単なる例）

<div id='mainPanel' 
     style='position:absolute; left: 0px; top: 50px; 
      border: 1px solid black; white-space: nowrap'>Main Panel</div> 
<input type='button' id='hideText' value='Hide Text' 
     style='position:absolute;left:0px'> 
<input type='button' id='showText' value='Show Text' 
     style='display:none; position:absolute;right:0px;'> 

あなたは幅効果が気に入らない場合、それは簡単に画面の左側の外にスライドするために変更することができます、このようにhttp://jsfiddle.net/3FwWV/

ps：右クリックしてボタンをクリックし、jsfiddleのスパンではなく「結果」

Answer 2

http://jqueryui.com/demos/hide/

ここでスライド効果と実装を確認してください。