動畫選片-XML(P3)

)利用data-*屬性在jQuery應用

範例結果

(1) 逐一顯示圖片

S1 : 加入CSS美化

/*加入CSS美化*/
.list{ opacity: 0;}

S2 : JQ加入,程式必須寫在【success】區域內

        //S3:利用動畫逐一顯示影片
        $('.list').each(function(i){
          $(this).delay(i*300).animate({opacity:1},1000);
          // console.log(i*300);
        });

 

(2) 依類別顯示畫面

參考連結:HTML data-* 屬性jQuery選取器

S1:篩選項目前,為按鈕美化,並抓取其篩選條件,以利後續篩選項目

  //S4:篩選項目
    $('.tag a').click(function(){

      // S4-1:利用加上【.isactive】顯示正在篩選的按鈕色彩
        $('.tag a').removeClass('isactive');
        $(this).addClass('isactive');

      //S4-2:click時,抓取a的【href】值
        var $tag = $(this).attr('href').replace('#','');
        // console.log($tag);

    });

S2:利用hide( ) 及 show() 顯示

  //S4:篩選項目
    $('.tag a').click(function(){

      // S4-3:練習1:利用hide()、show()顯示篩選項目
        //S4-3-1:在篩選前,利用【hide】隱藏各項目
        $(".list").hide();

        //S4-3-2:利用【show】顯示符合篩選條件項目
          if( $tag == 'all' ){
            $('.list').show();
          }else{
            $('.list[data-tag*="'+$tag+'"]').show();
          }
    });

S3 : 利用opacity 及animate ()顯示

  //S4:篩選項目
    $('.tag a').click(function(){

      // S4-3:練習1:利用opacity、animate()顯示篩選項目
        //S4-3-1:在篩選前,利用【opacity】隱藏各項目
        $('.list').each(function(){
          $(this).css({opacity:0,display:'none'});
        });


        //S4-3-2:利用【animate】顯示符合篩選條件項目
          if( $tag == 'all' ){
            $('.list').each(function(i){
              $(this).css({opacity:0,display:''}).delay(i*100).animate({opacity:1},300);
            });
          }else{
            var $tabFilter = $('.list[data-tag*="'+$tag+'"]');
            console.log($tabFilter.length);
            $tabFilter.each(function(i){
              $(this).delay(i*100).css({opacity:0,display:''}).animate({opacity:1},300);
            });
          }
    });