2018-03-29

jQueryで表示切り替え

n番目のliをクリックすると対応した別セクション（section）の#charactor(n)（nは数字）を表示すると言うのをjQueryで勉強で作ってみました。
オリジナルシナリオのキャラクター紹介のページに使う予定です。

そう言うとかっこいいけど、プロの人から見たら大した事ない上に色々ご指摘があるかもしれません。
（自己責任でお願いします）

＜デモページはサイト調整のため現在非表示＞

各キャラクター紹介のエリアはposition: abosolute;で同じ場所に重ねてdisplay: none;で表示を消してます。
デフォルトとして一番上（最初）のキャラだけ表示。（必要に応じて表示時アニメーション用cssのclassもこのidだけ追加しておく）

─────初期設定
※charactor　と　$beforeID　はコンテンツに合わせて適当な名前に

最初に$beforeIDに#charabtor1を指定（格納）
$beforeIDはクリックされた時、１個前にクリックして表示させたidを保管しておく変数

─────liがクリックされる度、

何番目のliがクリックされたかをvar indexで保存して、
１個前に表示させたidをまず非表示（＆表示時アニメーション用cssのclassを削除）に
今クリックで表示されたidを　$beforeID = $('#charactor' + index);　で上書きで保管

その後

（そのidに表示時アニメーション用cssのclass追加）
そのidのセクションを表示

───────────────────

こんな感じで…

$(function() {
  var $beforeID = $('#charactor1'); //初期設定（仮に指定）

////////クリックされたら////////
  $('#charaList li').on('click',function(){

    //何番目のliがクリックされたか
    var index = $('#charaList li').index(this) + 1;

    //$beforeID（１つ前にクリックされたID）を非表示＆アニメーションclass削除
    $beforeID.fadeOut(600);
    $beforeID.removeClass("viewAnimation");

    //今クリックで表示されたIDを保管（上書き）#charactor + index
    $beforeID = $('#charactor' + index);

    //（アニメーションclass追加＆）そのID（$beforeID）を表示
    $beforeID.addClass("viewAnimation");
    $beforeID.fadeIn(1000);
  });
});

<div id="charaViewWrap">
<div id="charaList">
	<ul>
	<li>キャラクター001</li>
	<li>キャラクター002</li>
	<li>キャラクター003</li>
	<li>キャラクター004</li>
	<li>キャラクター005</li>
	</ul>
</div>

<section class="charaView viewAnimation" id="charactor1">
	<h3>キャラクター001</h3>
	<p>説明001-01</p>
	<p>説明001-02
</p>
</section>

<section class="charaView" id="charactor2">
	<h3>キャラクター002</h3>
	<p>説明002-01</p>
	<p>説明002-02
</p>
</section>

<section class="charaView" id="charactor3">
	<h3>キャラクター003</h3>
	<p>説明003-01</p>
	<p>説明003-02
</p>
</section>

<section class="charaView" id="charactor4">
	<h3>キャラクター004</h3>
	<p>説明004-01</p>
	<p>説明004-02
</p>
</section>

<section class="charaView" id="charactor5">
	<h3>キャラクター005</h3>
	<p>説明005-01</p>
	<p>説明005-02
</p>
</section>

</div> <!----- charaVeiwArea end ----->

2018-02-21

自分の価値

虚空の宮（考察未満・憂い）

特に去年、すごいって言われたいと言う衝動と戦っていた時があって、たどり着いたブログ。
すごい納得した。　そういう発想にたどり着けなかった自分が悔しくもある…！
時折ぶり返すかもしれないけど。。！　ありがとうございました。

裏を返せば、何もできなくても私には価値があるっていう事（特に、自分が思っている分野しか見えなくなっちゃうから）。

ameblo.jp

どこかに残しておこうと思ったのでここに。

2018-02-12

IEでhoverでbackgroundが効かない（動かない）対策

幻実の宮-物理層（コード系）

今まで適当だったanimationの勉強をして、スマートじゃないかったとあるコードを修正する事に。

すると、firefoxやchromeでは動くのに、IEだけ動かない　い.つ.も.の　現象に...
webに携わってる人なら幾度となく出会うシーンですね＾＾（イライラ…）

そしてIEだけNGだった件の解決策は、アニメーション前の背景cssをa｛｝のところにも入れたら解決しました。（元々見えない位置に置いてるからネ）
（ここまでの時間が…）

元々のコードは:afterにimgで画像をpositionで置いてhover時に下からニュッと動かすってやつ…だったような。。
そのままtranslateとbackgroundに変えて出来そうだけど、勉強中でまだパッとコードが浮かばないので…animationでやりました。

li a{background: url(～～～) center  ＜最初に置く位置をpx等で指定＞ no-repeat; /* ←コレ */}
li a:hover{
animation-name: hoverani;
animation-duration: 0.1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;　/* 一括指定しても良いかも。でもIEで動かない可能性もあるらしい */
}

@keyframes hoverani {
  0%{background: url(～～～) center  ＜最初に置く位置をpx等で指定＞ no-repeat;}
  100%{background: url(～～～) center  ＜最終位置をpx等で指定＞ no-repeat;}
}

空の回廊

独りよがりなWebLog（たまにTemporary）

jQueryで表示切り替え

自分の価値

IEでhoverでbackgroundが効かない（動かない）対策