- 締切済み
jQueryのtabsについて
http://www.stilbuero.de/2007/10/23/jquery-ui-tabs-aka-tabs-3/ http://www.stilbuero.de/jquery/tabs_3/ http://www.special-sauce.com/sample/ マウスオーバーでタブ切り替え、かつ自動再生をさせたくて上記2点などのリンク先を参考に作りました。しかし以下のような問題が発生してしまいました。 テキスト1にマウスを置いてアニメーション途中でテキスト2へそしてテキスト1に戻るとアニメーションが途中で止まってしまう。 http://www.stilbuero.de/jquery/tabs_3/rotate.html 上記のデモサイト（こちらはクリックで動きますが。。）でも同じ症状がでるのでJavaScriptを書き足さないといけないのかもしれません。。JavaScriptがイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。
- amata-crea
- お礼率50% (3/6)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
ライブラリなしで、似たようなものですが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .waku0 { width:600px; height:140px; border:1px #ddd solid; } #wakul { width:200px; height:140px; background-color:#eee; overflow:auto; float:left;} #wakur { width:400px; height:140px; overflow:hidden; float:left; position:relative;} .wpage { width:398px; height:138px; background-color:#eef; overflow:auto; position:absolute; top:0px; left:0px; border:1px #888 solid;} .hide { display:none; } .menu { list-style-type:none; padding:0px; margin:0px;} </style> <div class="waku0"> <div id="wakul"> <ul class="menu"> <li><a href="#menu0">あいうえお</a></li> <li><a href="#menu1">かきくけこ</a></li> <li><a href="#menu2">さしすせそ</a></li> <li><a href="#menu3">たちつてと</a></li> <li><a href="#menu4">なにぬねの</a></li> </ul> </div> <div id="wakur"> <div class="wpage" id="menu0"><img src="p0.gif" width="50" height="50" alt="あ～">あ～</div> <div class="wpage hide" id="menu1"><img src="p1.gif" width="50" height="50" alt="か～">か～</div> <div class="wpage hide" id="menu2"><img src="p2.gif" width="50" height="50" alt="さ～">さ～</div> <div class="wpage hide" id="menu3"><img src="p3.gif" width="50" height="50" alt="た～">た～</div> <div class="wpage hide" id="menu4"><img src="p4.gif" width="50" height="50" alt="な～">な～</div> </div> </div> <script type="text/javascript"> //@cc_on document.getElementById('wakul')./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) { var count = 0, p, element = evt./*@if(1)srcElement @else@*/ target /*@end@*/; if (element.tagName != 'A') return; p = element.parentNode; while (p = p.previousSibling ) count += (p.nodeName == 'LI'); p = document.getElementById('wakur').firstChild; do if( p.nodeName == 'DIV' && count-- == 0) return (new MenuSlider( p, 140, 15)); while( p = p.nextSibling ) } ,false); function MenuSlider (e, h, w){ var t, s = e.style, n = e.parentNode.childNodes, c = 0, o; while (o = n[c++]) if (o.nodeName == 'DIV') o.style.zIndex = 0; s.display = 'block'; s.zIndex = 1; t = setInterval((function (){ return function (){ s.top = h + 'px'; if (!h) clearInterval(t); else h -= Math.floor((h / 15) + 1); } })(this), w); } </script>
