ToSelectorについて（ｊQuery）

解決済

質問者：mark28
質問日時：2011/04/28 02:17
回答数：3件

http://james.padolsey.com/demos/animateToSelector/

http://phpjavascriptroom.com/exp3.php?f=include/ …

CSSをhtmlソース内ではなく、外部ファイルに変更すると
FirefoxとChromeだけアニメーションが反応しなくなってしまいます。

おそらく、
$('#navigation a').animateToSelector({
selectors: ['#navigation a:hover'],
properties: [
'background-color',
'padding-left',
'color'
],
events: ['mouseover', 'mouseout']
});
を外部CSS用に作り替えるのだと思うのですが、
http://www.re-creators.jp/blog/2008/10/01_114.html
等を参考にしたのですが、具体的な書き方がわかりません。

どなたかご教授願います。

通報する

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

質問の本文を隠す

回答 (3件)

No.1

回答者： reggaepunc
回答日時：2011/04/28 23:02

本家サイトのソースは元から外部CSSになっていますよね？

http://james.padolsey.com/demos/animateToSelector/

↓こちらのサイトのデモはfirefox3.6（Mac）でエラーが出て、元々動かないようです。
http://phpjavascriptroom.com/exp3.php?f=include/ …

- 0
- 件

通報する

この回答へのお礼

reggaepuncさん

ありがとうございます。

本家は外部CSSでした。

しかし、ダウンロードして全く同じようにやったのに、
なぜかChromeやFirefoxは反応しませんでした。

もう少し調べてみます。

通報する

お礼日時：2011/04/29 18:18

No.2

回答者： reggaepunc
回答日時：2011/04/30 00:37

動作確認済みのhtmlソースを載せておきますお。

（教えてgooの入力文字制限のため余計な文章は削除しました。）
-------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>'animateToSelector' jQuery plugin</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3. …

<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>

<ul id="navigation">
<li id="nav-cal"><a href="#"><span>Calendar</span></a></li>

<li id="nav-video"><a href="#"><span>Upload Video</span></a></li>
<li id="nav-post"><a href="#"><span>Post something</span></a></li>
<li id="nav-note"><a href="#"><span>Notifications</span></a></li>
<li id="nav-mobile"><a href="#"><span>Mobile settings</span></a></li>
</ul>


<script type="text/javascript" src="js/animatetoselector.jquery.js"></script>
<script type="">
//<![CDATA[

/* Calling the plugin: */

$('#navigation a').animateToSelector({
selectors: ['#navigation a:hover'],
properties: ['background-color','padding-left','color'],
events: ['mouseover', 'mouseout'],
duration: 300
});

/* Other stuff, just for the demo page: */

$('#inNav a').animateToSelector({
selectors: ['#inNav a:hover'],
properties: ['background-color','color'],
events: ['mouseover', 'mouseout'],
duration: 200
});

// ]]>
</script>

</body>

</html>

- 0
- 件

通報する

この回答へのお礼

ご教授ありがとうございます。

上記の通りに書いたところ、
Firefoxはクリアいたしました。

しかしChromeだけなぜか反応しません。

http://james.padolsey.com/demos/animateToSelector/
元サイトはChromeでも普通に動作します。

まだどこか違うのかもしれません。
もう少しねばってみます。

通報する

お礼日時：2011/05/03 15:44

No.3ベストアンサー

回答者： reggaepunc
回答日時：2011/05/03 16:15

ごめんなさい。

私のソースに問題がありました。

★間違い
---------------------------------------------------
<script type="text/javascript" src="js/animatetoselector.jquery.js"></script>
<script type="">
---------------------------------------------------
↓
★正解
---------------------------------------------------
<script type="text/javascript" src="js/animatetoselector.jquery.js"></script>
<script>
---------------------------------------------------

よろしくお願いします。
chrome11（mac）にて動作確認済み。