jQuery | パソコン倶楽部りんご

jQuery。ライブラリを使うほどのものではないので自作してます。（自作というほどのものじゃないけど）

そのページが開いたら、非表示にしてあるテキストが順番にぱっ、ぱっ、と現れてほしいだけなのに

なぜかアニメーションします。

一応「ヌー」http://semooh.jp/jquery/api/effects/

参考にしているんですが….。ぬ～

私の知識レベルですが、回答致します。

.showの前に.delayを入れると、アクション開始のタイミングを遅らせることができます。

改訂後のjavascriptですが、

入れ子関係にして、各々を2秒間ずらし、0.01秒間かけてメッセージの表示、とします。

テストしましたが、これで順番に表示ができます。

もっとシンプルに書けそうな気もしますが、単純に理解し易いプログラム記述ですと、こうなるかと思います。

<script type="text/javascript">
$(function(){
$('#text1').hide();
$('#text1').show(10);

$(function(){
$('#text2').hide();
$('#text2').delay(2000).show(10);

$(function(){
$('#text3').hide();
$('#text3').delay(4000).show(10);

$(function(){
$('#text4').hide();
$('#text4').delay(6000).show(10);
});
});
});
});
</script>

$(function(){

$('#text1').hide();

$('#text1').show(10);

$(function(){

$('#text2').hide();

$('#text2').delay(2000).show(10);

$(function(){

$('#text3').hide();

$('#text3').delay(4000).show(10);

$(function(){

$('#text4').hide();

$('#text4').delay(6000).show(10);

});

</script>

#12ランサーしょうじ

まず、$(function(){……}は1回だけで充分。

よくわからない人は、もう一度、仕様を読み直しましょう。

「ヌー」のサイトはリファレンスとして素敵ですが、基本を学ぶなら以下がおすすめ。

「jQuery 開発者向けメモ – 基本・サンプル」

http://www.mikage.to/jquery/jquery_basic.html

1ページで解説とサンプルになっています。

$(function(){……}については「HTMLとコードの分離」の辺りに解説があります。

$(function(){
//cssのセレクタと同じく、要素を列挙するなら、カンマで区切れば良い。
//$('#text1,#text2,#text3,#text4').hide();

//でも、cssと同じく、要素が特定できれば良いのだから、こう書いた方がスマート。
$('ul li').hide();

//でもって、効果を予想するとfadeInの方が良いのではないかな？と思ったり。
$('#text1').fadeIn(300);
$('#text2').delay(2000).fadeIn(300);
$('#text3').delay(4000).fadeIn(300);
$('#text4').delay(6000).fadeIn(300);
});

$(function(){

//cssのセレクタと同じく、要素を列挙するなら、カンマで区切れば良い。

//$('#text1,#text2,#text3,#text4').hide();

//でも、cssと同じく、要素が特定できれば良いのだから、こう書いた方がスマート。

$('ul li').hide();

//でもって、効果を予想するとfadeInの方が良いのではないかな？と思ったり。

$('#text1').fadeIn(300);

$('#text2').delay(2000).fadeIn(300);

$('#text3').delay(4000).fadeIn(300);

$('#text4').delay(6000).fadeIn(300);

});

#2タカハシ先生

ファイル直しました。まさにやりたいのはこれでした！

↓

http://nobu-69.com/jquery_test0626

.showではなかったようですね。

.fadeInが正解のようでした！

#3真中のぶ

月	火	水	木	金	土	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

パソコン倶楽部りんご

Webデザイン脱初心者の勉強会

タグ別アーカイブ: jQuery

自由研究：CSSで３D表現（リカちゃんパリのお散歩）

jQuery fadeIn