###### tags:`Jquery`

Jquery融合CCS基礎
=======

jquery融合CCS基礎
----------
- 啟動前一定要加

    $('h1').hide()})

- 點擊 隱藏

  $('.button').click(function(event) {
    $('h1').hide();
  });
});

- toggle:可進行偵測程式碼是否執行

    $('.button').click(function(){
        $('h1,p').toggle()
    })
})

- slide滑動出現消失

$(document).ready(function(){
    $('.button').click(function(event){
        $('.text').slideToggle();
    })
})

- fade透明漸增出現

$(document).ready(function(){
    $('.button').click(function(event){
        $('.text').fadeToggle(3000);
    })
})

- 動態加一個css class

$(document).ready(function(){
    $('.button').click(function(event){
        $('.text').toggleClass('active');
    })
})

- 動態加class套裝模組 淡出淡入opacity+transition

.text{
            /*此段為css 搭配樓上的toggleClass*/
            opacity:0;
            transition: all 3s;
        }

.text.active{
            opacity:1;
            transition: all 3s;
        }

- 動畫效果:當客戶滑到目標物才會浮現 利用overflow與position
> 將欲浮動的物件overflow隱藏起來，利用position位置的特性小區域浮現出物件。

- jq鍵式寫法
> 可直接在jq後面連接物件方法

$('.box').slideUp(1000).slideDown(1000).fadeOut(1000).show(1000); 

- f12 -> Source
可藉由網頁瀏覽器的 來進行同步除錯。

# 動畫效果大全 css+javascript

- 透過jq來避免動畫效果

$(document).ready(function () {
    $('.box').click(function (e) { 
        e.preventDefault();
    });
});

- js介面動態載入css

$(document).ready(function () {
    $('.box').click(function (e) { 
        e.preventDefault();
        $('.box').css('width','500px')
    });
});

- 選單持續顯現實作
> 如圖所示
> html
> css
> js

- box依序出現的動畫 delay()

$(document).ready(function () {
    $('.open').click(function (e) { 
        e.preventDefault();
        $('.box1').delay(0).slideDown();
        $('.box2').delay(1000).slideDown();
        $('.box3').delay(2000).show(0);
    });
});

- 老人用放大文字功能 直接在js用.css

$('.font-b').click(function(event) {
    event.preventDefault();
    $('.content p').css('font-size','20px');
  });

- 彈跳出的小廣告關閉之效果
> 範例圖示

> CSS，我覺得配置css好像比較難哈哈

.ad{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 100px;
  background: #000;
  color: #fff;
}
.ad .ad-close{
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  background: red;
  color: #fff;
  padding: .5em
}

- stop() 中斷動畫效果

$('.box').stop().slideToggle(3000);

- transform: translateX(X) 滑出選單覆蓋原本網頁
> css 對加上的class另開出一條變化之路

.aside{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 270px;
  height: 300px;
  background: yellow;
  overflow: hidden;
  transform: translateX(-270px);
  transition: 0.3s ease;
}
.open .aside{   
  transform: translateX(0px);
}

> js 透過按下在標籤加上class

$(document).ready(function() {

  $('.header').click(function(event) {
    /* Act on the event */
    $('body').toggleClass('open');
  });

});

- animation.css 利用css執行動畫效果
> jq透過在html中加class來進行css動畫效果

$('#add').click(function() {
  $('.text').addClass('animate__animated animate__bounce');
});
$('.text').on('animationend', function() { // 監聽當動畫結束後移除 class
  $(this).removeClass('animate__animated animate__bounce');
});

---