クリックイベントでfadeOutを発生させたい

前提・実現したいこと

jqueryでfadeOutのクリックイベントを発生させる。

発生している問題・エラーメッセージ

クリックイベントが発生せず、1行目と2行目がもう一度発生してしまう。

該当のソースコード

<div class="wrapper">
    <img src="img/film.jpg" class="film">
    <div class="contents">
    <div class="content">
        <a href="" class="btn1">
        <p class="title">ABOUT</p>
        <div class="icon">
            <img src="./img/icon_human.png" alt="">
        </div>
        </a>
    </div>
    <div class="content">
        <a href="" class="btn2">
        <p class="title">WHAT I MADE</p>
        <div class="icon">
            <img src="./img/icon_pc.png" alt="">
        </div>
        </a>
    </div>
    <div class="content">
        <a href="" class="btn3">
        <p class="title">PICTURE</p>
        <div class="icon">
            <img src="./img/icon_camera.png" alt="">
        </div>
        </a>
    </div>

$(function(){
$('.name').hide().fadeIn(3000).fadeOut(2000);
$('.wrapper').hide().delay(5000).fadeIn(2000);
$('.btn1').click(function() {
$('.wrapper').fadeOut(1000);
});

試したこと

タイプミスなど確認しましたが、何故動かないのか皆目見当がつきません…

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/10/18 14:07

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、コードが途中で切れているので、そこも修正してください。jQueryもスクリプトも読み込んでいないコードですが、どこでどのように読み込んでいるかもあわせて提示されたほうが問題が解決しやすいです。

行動規範の内容に同意します

回答1件

href="#"となっていないため、クリックすると再度ロード→フェードインが行われてしまうようです。
preventDefault()でデフォルト動作を無効にでき、フェードアウトのみ行われます。

JavaScript
1$(function(){
2    $('.name').hide().fadeIn(3000).fadeOut(2000);
3    $('.wrapper').hide().delay(5000).fadeIn(2000);
4    $('.btn1').click(function(event) {
5        event.preventDefault();
6        $('.wrapper').fadeOut(1000);
7    });
8});
9