第9章　jQueryの効果 - コールバック関数

# **jQueryの効果 - コールバック関数**

現在の効果が100％終了した後にコールバック関数が実行されます。

## **jQueryコールバック関数**
JavaScriptステートメントは1行ずつ実行されます。ただし、エフェクトを使用すると、エフェクトが終了していなくても、次のコード行を実行できます。これによりエラーが発生する可能性があります。

これを防ぐために、コールバック関数を作成することができます。

現在の効果が終了した後にコールバック関数が実行されます。

### 典型的な構文：
```
$(selector).hide(speed,callback);
```

以下の例は、非表示効果が完了した後に実行される関数であるコールバックパラメータを持っています。

#### 例
[sample9-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(){
    $("p").hide("slow", function(){
      alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>

<p>This is a paragraph with little content.</p>

</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;p&quot;).hide(&quot;slow&quot;, function(){
      alert(&quot;The paragraph is now hidden&quot;);
    });
  });
});
</script><body>

<p>This is a paragraph with little content.</p>

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

</span>
</pre>

***

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

content

第9章 jQueryの効果 - コールバック関数

第9章　jQueryの効果 - コールバック関数