jcueryのスライドするナビゲーションについて2
「jcueryのスライドするナビゲーションについて」下記ページにて質問させてもらったものです。
http://okwave.jp/qa/q6830580.html
横スクロールサイトでスライドナビゲーションを使用しており
同じページ内の各コンテンツに移動した際にスライドも停止させるというのを
回答者さまのご回答どおり、以下のjsで実現することができました。
$(function() {
var $el, leftPos, newWidth,
$mainNav = $("#example-one");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$("li a", $mainNav).click(function(){
$magicLine
.data("origLeft", $(this).position().left)
.data("origWidth", $(this).parent("li").width())
.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
ただまた一つ問題に気づいてしまったので質問させてください。
ナビゲーションのボタンクリック後にスライドはうまく動作するのですが、
更新ボタンを押すとページは、移動後のコンテンツのままで
スライドがまたTOPに戻ってしまいます。
更新ボタンをおしてもナビゲーションを表示しているページに合わせてストップさせるか
または、コンテンツもTOPに戻すかどちらかの方法で対処できたらと思っています。
どなたかお分かりの方がおられましたらお教え頂いても宜しいでしょうか。
どうぞ宜しくお願いいたします。
デモはこちらになります。
http://css-tricks.com/examples/MagicLine/
