クリックで、表示・非表示を切り替えたい。

Question

###前提・実現したいこと

<li class="btn">をクリックで、<span class="title">の表示・非表示を切り替えたい。 opacityの変更で対応したい。

###発生している問題・エラーメッセージ
javaScript、jQueryをちゃんと理解しておらず、動かない理由がわかりません！

###該当のソースコード

<ul id="navi">
<li class="logo"><a href="#top" class="current"><img src="img/logo.svg" width="30" height="30" /></a></li>
<li><a href="#AAA"><span class="mark"></span><span class="title">AAA</span></a></li>
<li><a href="#BBB"><span class="mark"></span><span class="title">BBB</span></a></li>
<li><a href="#CCC"><span class="mark"></span><span class="title">CCC</span></a></li>
<li class="btn"><span>×</span><span>&lt;</span></li>
</ul>

・<span class="title"></span>
ロードして表示してから非表示しています
↓

$(function() {
    $('ul#navi li .title')
        .css({opacity: 0})
        .each(function(i){
            $(this).delay(500 * i).animate({opacity:1}, 2000);
       });
    $('ul#navi li .title')
        .css({opacity: 0})
        .each(function(i){
            $(this).delay(100 * i).animate({opacity:0}, 1900);
       });
});

・<span>×</span><span><</span>はマウスオーバーできりかえで、どちらかの<span>しか表示していません

###試したこと

$(function(){
    $(".mainnav_text span").click(function(){
        $('#navi li.title').css('opacity', '1');
    });
});

↑

$(function() {
  $('.btn').click(function() {
    $('.title').toggleClass('visibie'); 
  }); 
});

↑

掴みかけてる気がしていたけれど、まったく理解していないみたいです・・・

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

まず、

$(function(){
    $(".mainnav_text span").click(function(){
        $('#navi li.title').css('opacity', '1');
    });
});

この.mainnav_textがどこから出てきたかわかりません。

次に試された部分ですが、

$(function() {
  $('.btn').click(function() {
    $('.title').toggleClass('visibie'); 
  }); 
});

この文が意味しているのは、.btnがクリックされるごとに、.titleに対して.visibieクラスを付与あるいは削除しています。
(visibleのつづり間違いですよね？ またもしこの文でvisibility: hidden;とvisivleを切り替えたいと思っているならば.toggleClassをちゃんと理解するべきです。)

なので、cssで

.title{
opacity:0;
}

.title.visible{
opacity:1;
}

とすれば、.btnをクリックするごとに.titleの表示非表示は切り替わります。
ただし、jqueryのanimateでopacityをいじるのであれば、0から戻すときにも同じ記述を使うべきです。

この命令でopacityを０にしたならば。
$(this).delay(100 * i).animate({opacity:0}, 1900);

この命令で1にすれば良いと思います。
$(this).delay(100 * i).animate({opacity:1}, 1900);

なので例文を書き換えると

$(function() {
  $('.btn').click(function() {
    $('.title').delay(100 * i).animate({opacity:1}, 1900);
  }); 
});

ですね。

Comments

[kei344]

回答文のコードにもコードブロックが使えますよ。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。（2017/02/21追記：編集ありがとうございます！）

[shaak]

慣れてないものですみません。
ご指摘ありがとうございました。　

Answer 2

• http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/

に aimate をつかった例があります。
まずはこれを調査してみると良いと思います。