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


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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/04/15 17:45:47
  • 終了:2011/04/22 17:50:07

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/04/16 02:10:02

ポイント60pt

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

一枚の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>
id:finnapple

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

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

2011/04/18 14:29:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません