[ 勉強 ] 1行テキストをフェードインしながら切り替えるjQueryスクリプト

人様のソースコードを読み解くシリーズです。1行テキストをフェードインしながら切り替えるjQueryです。

JavaScript(jQuery)は以下のとおりです。

Java Script

$(function() {
    function headline() {
        setTimeout(function() {
            headline();
                $("#news li").not(':first').css('display', 'none');
                $("#news li:first").fadeOut('normal', function() {
                $(this).next().fadeIn('normal');
                $(this).clone().appendTo("#news ul");
                $(this).remove();
            });
        }, 3000);
   }
   var n_size = $("#news li").size();
   if(n_size > 1) {
      headline();
   }
});

私はいつも、要素を全部非表示にして、最初だけ再表示するような書き方をしていたのですが、『$(“#news li”).not(‘:first’).css(‘display’, ‘none’);』というように一行で書けるのですね。このほうがシンプルです。

Java Script

$(element).hide();
$(element[0]).show();

最初の要素をフェードアウトして、次の要素をフェードイン、最初の要素のコピーを作る、最初の要素を削除。すると、次の要素が1番目の要素になり、最初の要素が一番最後にくるので…というのを繰り返していく考えが面白かったです。なるほどー、こういうやり方もあるのですね。勉強になりました!