2012-03-17 8 views
0

現在、クライアント用のウェブサイトをプログラミングしています。彼女は彼女の名前が画面の真ん中にあり、ユーザーが彼女の名前をクリックすると望みます。彼女は彼女の名前がカーテンのように開き、フェードアウトして、絵やメニューがフェードインしたいと思っています。カーテンを開き、jqueryでカーテンをフェードアウトするにはどうすればいいですか?

彼女は彼女の名前を左に移動して消したいと思っています。同時に、彼女の姓は右に動いて消えます。その直後

、のメニューフェードと絵。

が提供される任意の助けてくれてありがとう。

+1

これはグーグルでしたか? – Geekfish

+0

「カーテンが好き」という意味ではわかりません。これは、イメージが中央でカットされ、次に2つの部分が接触している底部コーナーから剥がれることを意味する可能性がありますが、2つの部分がちょうど互いから滑り落ちることを意味する可能性もあります。同様に、テキスト(彼女の名前)が底から引き上げられることを意味することもあります。これはあまりにもあいまいです。 – wecsam

答えて

2

これは、私はあなたがposition: relativeを使用してそれを行うことができると確信していますが、絶対位置を使用して迅速かつ汚い最初のバージョンですが、ちょうど一般的な考え方(Fiddle)を示すために:

$(function(){ 
    $('div').click(function(){ 
     $('span.first').animate({ 
      left: '-=50' 
     }); 

     $('span.second').animate({ 
      left: '+=50' 
     }); 

     $(this).fadeOut(); 
    }); 
})();​ 

はHTML:

<html> 
<body> 
    <div> 
     <span class="first">Na</span><span class="second">me</span> 
    </div> 
</body> 
</html>​ 

CSS:

div { 
    position:relative; 
    background-color: red; 

} 
span { position: absolute; font-size: 20px; } 
span.first { left: 50px } 

span.second{ left: 73px } 

+0

ところで、私はメニューを外しましたが、そのようなものは名前に適用されたfadeOut()エフェクトの後に行きます。 –

関連する問題