http://git.blivesta.com/chaffle/
のライブラリを使用して、マウスオーバーしたら
テキストがシャッフルされる動きを実現しています。
//js const elements = document.querySelectorAll('[data-chaffle]'); Array.prototype.forEach.call(elements, function (el) { const chaffle = new Chaffle(el, { /* options */ }); el.addEventListener('mouseover', function () { chaffle.init(); }); }); //html <ul> <li> <a href=""> <div class="img"><img src="img/img.png"></div> <p class="tit1" data-chaffle="en">aaa</p> <p class="tit2" data-chaffle="en">bbb</p> </a> </li> <li> <a href=""> <div class="img"><img src="img/img.png"></div> <p class="tit1" data-chaffle="en">aaa</p> <p class="tit2" data-chaffle="en">bbb</p> </a> </li> </ul>
pタグの上にマウスオーバーした際はちゃんと動くのですが、
aタグにホバーしたときに、pの要素をシャッフルしたいのですが、うまくいきません。。
試してみたコードは以下ですが、
TypeError: $(...).addEventListener is not a function
というエラーになります。。
var elements = $(".mainlist p"); Array.prototype.forEach.call(elements, function (el) { var chaffle = new Chaffle(el, { /* options */ }); $(".mainlist a").addEventListener('mouseover', function () { chaffle.init(); }); });
要は、シャッフルさせたい要素はpタグで、
トリガーはaタグにしたいだけなのですが、あまりそのように
されている記事がなく、、
ご教授お願いいたします。
回答1件
あなたの回答
tips
プレビュー