jQueryのtabsについて

解決済

質問者：amata-crea
質問日時：2009/02/24 16:42
回答数：1件

http://www.stilbuero.de/2007/10/23/jquery-ui-tab …
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がイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2009/02/25 10:07

ライブラリなしで、似たようなものですが。

<!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>