Animsitionというプラグインを使ってページ遷移のエフェクトをつけたいのですが、うまくいきません。
こちら（ttp://git.blivesta.com/animsition/fade/）に書いてある通りに設定をしましたが、以下のような現象が起きています。
●animsition_linkというクラス名をつけているメニュー（li要素）では通常のエフェクトなし遷移になる
●animsition_linkというクラス名をつけていないh1要素をクリックすると、エフェクト付きのページ遷移がされる
●試しにanimsition_linkというクラス名をli要素から外してみたが、結果は変わりませんでした。
ソースは回答の方に書きます。
みんなの回答 1 件
ソースです。
<html>
<head>
<link rel="stylesheet" href="css/animsition.min.css">
<script src="script/1.11.3/jquery.min.js"></script>
<script src="script/jquery.animsition.min.js"></script>
<script>
$(document).ready(function(){
$(".animsition").animsition({
inClass: ’fade-in’,
outClass: ’fade-out’,
inDuration: 1500,
outDuration: 1000,
likeElement: ’.animsition-link’,
loading: false,
loadingParentElement: ’body’,
loadingClass: ’animsition-loading’,
unSupportCss: [’animation-duration’, ’-webkit-animation-duration’, ’-o-animation-duration’],
overlay: false,
overlayClass: ’animsition-overlay-slide’,
overlayParentElement: ’body’
});
});
</script>
</head>
<body>
<main class="animsition">
<header>
<h1><a href="">test</a></h1>
<nav>
<ul>
<li><a href="#" class="animsition_link">リンク1</a></li>
<li><a href="#" class="animsition_link">リンク2</a></li>
<li><a href="#" class="animsition_link">リンク3</a></li>
<li><a href="#" class="animsition_link">リンク4</a></li>
</ul>
</nav>
</header>
<div id="container">
・・・・・・・
</div>
CSSとスクリプトは上記サイトで配布されているものをそのまま使っています。
クラス名をつけているタイトルだけがエフェクトがかかる理由もわからず…
アドバイスいただけると嬉しいです。
よろしくお願いします。
関連するトピックス