人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryのアニメーション制御に関して質問です。

ある程度までは自分で作成したのですが、思うような動作をしてくれないので困っています。
以下のにサンプルをアップしましたので、助言を頂けれると助かります。
http://www.geocities.jp/qntbd042/demo/sample.html

●質問者: 雨の日
●カテゴリ:インターネット ウェブ制作
✍キーワード:jQuery アニメーション 作成
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●60ポイント ベストアンサー

コメント欄は有効にしたほうが有益です。

一枚のhtmlで動作確認ができるソースがあるとありがたいです。


こんな感じでしょうか。

(クリックで動く矢印の位置が絶対的なのが気になりますが全体を見ないとわからないのでそのまま)


demo: http://jsfiddle.net/eZjgn/

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 text-align: center;
 font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
}
li {
 list-style: none;
}
#info {
 height: 40px;
}
#wrapper {
 margin: 50px auto;
 width: 800px;
}
#sample {
 position: relative;
 height: 240px;
 overflow: hidden;
}
#sample ul {
 float: left;
}
#main {
 position: absolute;
 width: 10000px;
 height: 240px;
 overflow: hidden;
}
#main li {
 float: left;
 width: 590px;
 overflow: hidden;
 border: solid 5px #ccc;
 height: 230px;
}
#thumb {
 position: absolute;
 width: 200px;
 right: 0;
 background: #fff;
}
#thumb li {
 padding: 10px;
 width: 198px;
 height: 38px;
 cursor: pointer;
 overflow: hidden;
 background: #999;
 border: solid 1px #ccc;
}
#position {
 position: absolute;
 top: 22px;
 right: 191px;
 z-index: 10;
}
pre {
 padding: 10px;
 background: #000;
 color: #fff;
 text-align: left;
}
#mondai {
 margin-top: 20px;
 text-align: left;
}
.style1 {color: #00FF00}
.style2 {color: #FFFF00}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
//ボタンにclass名を設定
$("#thumb li").each(function(i) {
$(this).addClass('thumb_' + i);
});

//ボタンをクリックした際の処理
$("#thumb li").click(function() {
var n = $("#thumb li").index(this);
var thumb_n = (n * 60) + 22;
$("#position").animate({top: thumb_n + 'px'}, {duration: 200,easing: 'easeOutExpo'});
var main_n = $('#main li').eq(n).position().left * -1;
$('#main').animate({left: main_n + 'px'}, {duration: 700,easing: 'easeOutExpo'});
$("#info").text('leftの位置を ' + main_n + ' 移動');//位置確認用
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="info">
</div>
<div id="sample">
<div id="position"><img src="http://www.geocities.jp/qntbd042/demo/position.png" /></div>
<ul id="main">
<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
<li>テスト4</li>
</ul>
<ul id="thumb">
<li>ボタン1</li>
<li>ボタン2</li>
<li>ボタン3</li>
<li>ボタン4</li>
</ul>
</div>
</body>
</html>
◎質問者からの返答

ご回答ありがとうございました。

こちらの希望どおりの動作です!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ