ナビゲーションメニューの表示で行き詰まっています。
助言をよろしくお願いしますm(_ _)m
現在、上から順に1つずつ li を表示しています。
マウスオーバーでフェードイン、アウトでフェードアウト。
これを、『5秒後に上から順に1つずつ li を表示』にしたいのですが、
delayを使っているとsetTimeoutは一緒に使えないのでしょうか?
$(function() { $('ul#navi li') .css({opacity: 0}) .each(function(i){ $(this).delay(500 * i).animate({opacity:1}, 2000); }); }); $(function(){ $("ul#navi li .title").css({opacity:'1'}); setTimeout(function(){ $("ul#navi li .title").stop().animate({opacity:'0'},1000); },4500); });
<ul id="navi"> <li class="logo"><a href="#top" class="current"><img src="img/logo.png" width="30" height="30" alt="" /></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><a href="#ddd"><span class="mark"></span><span class="title">ddd</span></a></li> <li><a href="#eee"><span class="mark"></span><span class="title">eee</span></a></li> </ul>
また、マウスオーバーではこちらを使用しています。
$(function(){ $("span.title").hover(function(){ $(this).stop().animate({"opacity":"1"}); },function(){ $(this).stop().animate({"opacity":"0"}); }); $("span.mark").hover(function(){ $('.title').stop().animate({"opacity":"1"}); },function(){ $('.title').stop().animate({"opacity":"0"}); }); $(".btn").hover(function(){ $('.title').stop().animate({"opacity":"1"}); },function(){ $('.title').stop().animate({"opacity":"0"}); }); });
どれにも競合せずうまく表示するにはどうすれば良いのか、考えています。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/14 10:31