誰か助けてもらえますか?
クライアント向けに開発しているWebサイトに注目のコンテンツスライダーを追加しました。彼らからのコメントの1つは、ホバー時にスライドトランジションが発生するかどうか、そしてスライドをクリックしたとき(または実際にはui-tabs)宛先URLに移動します。
私が持っているjQueryは、デモに付属している標準です(私はまだあなたが見ることを学んでいます)
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
「ホバーで一時停止」機能が追加されています。
とにかく、タブのHTMLは次のとおりです。
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span class="panelTitle">Find a<br />
<span class="panelTitleMain">Boat</span></span> <span class="panelCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span class="panelTitle">Find an ABYA<br />
<span class="panelTitleMain">Broker</span></span> <span class="panelCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span class="panelTitle">TBC<br />
<span class="panelTitleMain">TBC</span></span> <span class="panelCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a><</li>
</ul>
次のようにマウスオーバーでスライダーを変更することができましたが、ロード時に画像がちらつきます。
$("#featured").tabs({event: 'mouseover', fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
何か案は?