第7章　jQueryの効果

# **jQueryの効果 - フェード**

***

jQueryを使用すると、可視性の内外で要素をフェードインできます。

jQueryには以下のフェードメソッドがあります。

* `fadeIn()`
* `fadeOut()`
* `fadeToggle()`
* `fadeTo()`

<br>

## 1.fadeIn()
jQuery `fadeIn()`メソッドは、隠し要素をフェードインするために使用されます。

### 構文：
```
$(selector).fadeIn(speed,callback);
```
* オプションのspeedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。
* オプションのコールバックパラメータは、フェージングが完了した後に実行される関数です。

次の例では、fadeIn()さまざまなパラメータを使用した方法を示します。

#### 例
[sample7-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script>
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    $(&quot;#div1&quot;).fadeIn();
    $(&quot;#div2&quot;).fadeIn(&quot;slow&quot;);
    $(&quot;#div3&quot;).fadeIn(3000);
  });
});
</script><body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button style=&quot;font-size:inherit&quot;>Click to fade in boxes</button><br><br>

</body></html>'" width="800" height="400"></iframe>

</span>
</pre>

## 2.fadeOut()

jQuery `fadeOut()`メソッドは、可視要素をフェードアウトするために使用されます。

### 構文：
```
$(selector).fadeOut(speed,callback);
```
* オプションのspeedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。
* オプションのコールバックパラメータは、フェージングが完了した後に実行される関数です。

次の例では、`fadeOut()`のさまざまなパラメータを使用した方法を示します。

#### 例
[sample7-2.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button><br><br>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script>
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    $(&quot;#div1&quot;).fadeOut();
    $(&quot;#div2&quot;).fadeOut(&quot;slow&quot;);
    $(&quot;#div3&quot;).fadeOut(3000);
  });
});
</script><body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button style=&quot;font-size:inherit&quot;>Click to fade out boxes</button><br><br>

</body></html>'" width="800" height="400"></iframe>

</span>
</pre>

## 3.fadeToggle()
jQuery `fadeToggle()`メソッドは`fadeIn()`と`fadeOut()` メソッドを切り替えます。

要素がフェードアウトしている場合は、`fadeToggle()`それらをフェードインします。

要素が`fadeToggle()`フェードインすると、それらはフェードアウトします。

### 構文：
```
$(selector).fadeToggle(speed,callback);
```
* オプションのspeedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。
* オプションのコールバックパラメータは、フェージングが完了した後に実行される関数です。

次の例では、`fadeToggle()`のさまざまなパラメータを使用した方法を示します。
#### 例
[sample7-3.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script>
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    $(&quot;#div1&quot;).fadeToggle();
    $(&quot;#div2&quot;).fadeToggle(&quot;slow&quot;);
    $(&quot;#div3&quot;).fadeToggle(3000);
  });
});
</script><body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button style=&quot;font-size:inherit&quot;>Click to fade in/out boxes</button><br><br>

</body></html>'" width="800" height="400"></iframe>

</span>
</pre>

## 4.fadeTo()
jQuery `fadeTo()`メソッドは、指定された不透明度（0から1の間の値）にフェードインすることを可能にします。

### 構文：
```
$(selector).fadeTo(speed,opacity,callback);
```
* required speedパラメータは効果の持続時間を指定します。値は "slow"、 "fast"、またはミリ秒です。
* この`fadeTo()`メソッドで必要な不透明度パラメータは、指定された不透明度（0〜1の値）へのフェードインを指定します。
* オプションのコールバックパラメータは、関数が完了した後に実行される関数です。

次の例では、`fadeTo()`のさまざまなパラメータを使用した方法を示します。
#### 例
  [sample7-4.html]

```
  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").fadeTo("slow", 0.15);
      $("#div2").fadeTo("slow", 0.4);
      $("#div3").fadeTo("slow", 0.7);
    });
  });
  </script>
  </head>
  <body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script>
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    $(&quot;#div1&quot;).fadeTo(&quot;slow&quot;, 0.15);
    $(&quot;#div2&quot;).fadeTo(&quot;slow&quot;, 0.4);
    $(&quot;#div3&quot;).fadeTo(&quot;slow&quot;, 0.7);
  });
});
</script><body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button style=&quot;font-size:inherit&quot;>Click to fade boxes</button><br><br>

</body></html>'" width="800" height="400"></iframe>

</span>
</pre>

<br>

***

> **練習**
>> 問題[Ex7-1.html]

content

第7章 jQueryの効果 - フェード

第7章　jQueryの効果 - フェード