---
# System prepended metadata

title: Jquery融合CCS基礎
tags: [Jquery]

---

###### tags:`Jquery`

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

jquery融合CCS基礎
----------
- 啟動前一定要加
```$(document).ready(function(){
    $('h1').hide()})
```
- 點擊 隱藏
 ```$(document).ready(function() {
  $('.button').click(function(event) {
    $('h1').hide();
  });
});
```
- toggle:可進行偵測程式碼是否執行
```$(document).ready(function(){
    $('.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位置的特性小區域浮現出物件。
![Overflow範例](https://i.imgur.com/NM7pW2f.jpg)

- jq鍵式寫法
> 可直接在jq後面連接物件方法
```javascript=
$('.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')
    });
});
```

- 選單持續顯現實作
> 如圖所示
![](https://i.imgur.com/gaGGmd6.jpg)
> html
![](https://i.imgur.com/ZHAbE08.jpg)
> css
![](https://i.imgur.com/TqkD3b1.jpg)
> js
![](https://i.imgur.com/BlgURJG.jpg)


- 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');
  });
```

- 彈跳出的小廣告關閉之效果  
> 範例圖示
![](https://i.imgur.com/tPgOFT2.png)

> 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() 中斷動畫效果
```javascript=
$('.box').stop().slideToggle(3000);
```
- transform: translateX(X) 滑出選單覆蓋原本網頁
> css 對加上的class另開出一條變化之路
```css=
.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
```javascript=
$(document).ready(function() {

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

});
```
- animation.css 利用css執行動畫效果
> jq透過在html中加class來進行css動畫效果
```javascript=
$('#add').click(function() {
  $('.text').addClass('animate__animated animate__bounce');
});
$('.text').on('animationend', function() { // 監聽當動畫結束後移除 class
  $(this).removeClass('animate__animated animate__bounce');
});
```

  
---
