jQueryを導入したのですが、片方づつしか動きません。


function()の定義に問題があると思うのすがご教授頂きたく。。

/* nav01
======================================== */
$(function () {
var num = 1;
$('#nav1 li')
//マウスオーバー画像を配置
.each(function roll(){
$(this).css('background', 'url(images/nav0'+num+'.gif) no-repeat 0px -47px')
num++;
})
.find('img').hover(
function (){
$(this).stop().animate({'opacity' : '0'}, 200);
},
function (){
$(this).stop().animate({'opacity' : '1'}, 1000);
}
);
});

/* zoom1
======================================== */


$(window).load(function() {
$('body').nivoZoom();
});
$(function(){
$('#top1 a').click(function(){
return false;
});
});
</script>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/09/29 21:43:48
  • 終了:2012/09/30 01:06:18
id:kadopi

ふたつの処理を行うためにfunction()がふたつ定義している書き方が良くないと思うので、正しい書き方を教えてもらえればと思っています。

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/09/29 22:31:02

ポイント100pt

http://jsfiddle.net/cherenkov/nHS5m/
こうとか。
参考にしたサイトのデモコードが良くない感じですかね。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
       <title>設置サンプル</title>
     <link href="css/style.css" rel="stylesheet">

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js"></script>
      <script type="text/javascript">
/* nav01
======================================== */
$(function() {
	$('#nav1 li').each(function(i){
		$(this).css('background', 'url(images/nav0' + (i+1) + '.gif) no-repeat 0px -47px')
   }).find('img').hover(
		function() {  
			$(this).stop().animate({'opacity' : 0}, 200);  
		},	function() {
			$(this).stop().animate({'opacity' : 1}, 1000);
		}
	); 
});

/* zoom1
======================================== */
$(window).load(function() {
   $('body').nivoZoom();
});
      </script>
      <style type="text/css">
#demo {
   margin:100px;
}
/*
 * jQuery Nivo Zoom v1.0
 * http://nivozoom.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * April 2010
 */
.nivoZoomHover {
   position:absolute;
   top:0px;
   left:0px;
   z-index:9;
   width:100%;
   height:100%;
   cursor:pointer;
}
.nivoCaption {
   display:none;
   position:absolute;
   z-index:110;
   text-align:center;
   background:#010101;
   color:#fff;
   padding:4px 0;
   overflow:hidden;
}
      </style>
   </head>
   <body>
      <div style="margin:10px 0;text-align:center;">
      	<ul id="nav1">
      		<li><a href="#"><img src="images/nav01.gif" width="140" height="47" alt="01" /></a></li>
      		<li><a href="#"><img src="images/nav02.gif" width="140" height="47" alt="02" /></a></li>
      		<li><a href="#"><img src="images/nav03.gif" width="140" height="47" alt="03" /></a></li>
      	</ul>
      	<ul id="top1">
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-cinnamon.gif" class="nivoZoom topLeft"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182114_m.jpg" alt=""></a></li>
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-papiyone.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182110_m.jpg"></a></li>
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-ikezun.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182054_m.jpg"></a></li>
      	</ul>
   </body>
</html>
他4件のコメントを見る
id:Cherenkov

回答を更新しました

2012/09/29 23:30:07
id:kadopi

わざわざ更新してのご回答ありがとうございます、やはりロールオーバーが問題のようですが今回はそこがメインではないのでよしとします。
何度も丁寧なご指導、ありがとうございました。
失礼致します。

2012/09/30 01:05:38

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/09/29 22:31:02ここでベストアンサー

ポイント100pt

http://jsfiddle.net/cherenkov/nHS5m/
こうとか。
参考にしたサイトのデモコードが良くない感じですかね。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
       <title>設置サンプル</title>
     <link href="css/style.css" rel="stylesheet">

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js"></script>
      <script type="text/javascript">
/* nav01
======================================== */
$(function() {
	$('#nav1 li').each(function(i){
		$(this).css('background', 'url(images/nav0' + (i+1) + '.gif) no-repeat 0px -47px')
   }).find('img').hover(
		function() {  
			$(this).stop().animate({'opacity' : 0}, 200);  
		},	function() {
			$(this).stop().animate({'opacity' : 1}, 1000);
		}
	); 
});

/* zoom1
======================================== */
$(window).load(function() {
   $('body').nivoZoom();
});
      </script>
      <style type="text/css">
#demo {
   margin:100px;
}
/*
 * jQuery Nivo Zoom v1.0
 * http://nivozoom.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * April 2010
 */
.nivoZoomHover {
   position:absolute;
   top:0px;
   left:0px;
   z-index:9;
   width:100%;
   height:100%;
   cursor:pointer;
}
.nivoCaption {
   display:none;
   position:absolute;
   z-index:110;
   text-align:center;
   background:#010101;
   color:#fff;
   padding:4px 0;
   overflow:hidden;
}
      </style>
   </head>
   <body>
      <div style="margin:10px 0;text-align:center;">
      	<ul id="nav1">
      		<li><a href="#"><img src="images/nav01.gif" width="140" height="47" alt="01" /></a></li>
      		<li><a href="#"><img src="images/nav02.gif" width="140" height="47" alt="02" /></a></li>
      		<li><a href="#"><img src="images/nav03.gif" width="140" height="47" alt="03" /></a></li>
      	</ul>
      	<ul id="top1">
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-cinnamon.gif" class="nivoZoom topLeft"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182114_m.jpg" alt=""></a></li>
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-papiyone.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182110_m.jpg"></a></li>
      		<li><a href="https://www.hatena.ne.jp/images/character/eps-image-ikezun.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182054_m.jpg"></a></li>
      	</ul>
   </body>
</html>
他4件のコメントを見る
id:Cherenkov

回答を更新しました

2012/09/29 23:30:07
id:kadopi

わざわざ更新してのご回答ありがとうございます、やはりロールオーバーが問題のようですが今回はそこがメインではないのでよしとします。
何度も丁寧なご指導、ありがとうございました。
失礼致します。

2012/09/30 01:05:38
id:kadopi

htmlのソースはこちらです。






<title>設置サンプル</title>
<link href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.zoom.js"></script>





/* nav01======================================== */ $(function() { var num = 1; $('#nav1 li') //マウスオーバー画像を配置 .each(function(){ $(this).css('background', 'url(images/nav0'+num+'.gif) no-repeat 0px -47px') num++; }) .find('img').hover( function(){ $(this).stop().animate({'opacity' : '0'}, 200); }, function(){ $(this).stop().animate({'opacity' : '1'}, 1000); } ); });/* zoom1======================================== */ $(window).load(function() { $('body').nivoZoom(); }); $(function(){ $('#top1 a').click(function(){ return false; }); }); </script>

</head>
<body>














</body>
</html>
id:oil999 No.2

oil999回答回数1728ベストアンサー獲得回数3202012/09/29 22:48:24

ポイント10pt

この部分の関数の対象要素が指定されていないので、このままでは動きません。

function (){
$(this).stop().animate({'opacity' : '1'}, 1000);
}
id:kadopi

処理前の画面です。
左のロールオーバーがおかしくなっています。

https://picasaweb.google.com/lh/photo/5STYNML4C5ACUVKMDd8KG9MTjNZETYmyPJy0liipFm0?feat=directlink



処理後の画面です。
3つ並んだ画像がクリックで拡大されています。
また、ロールオーバーでボタンの色が変わっています。
https://picasaweb.google.com/lh/photo/k1QSIZd9E8ZxD0NvQxcvTNMTjNZETYmyPJy0liipFm0?feat=directlink

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

トラックバック

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

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

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