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

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>


●質問者: 門屋 徹郎
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

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


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

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>

Cherenkovさんのコメント
>ふたつの処理 >ふたつ定義 >片方 が質問者しかわからないので、コピペで動作確認ができる最小限のソースコードとやりたいことを補足したほうが早い。

Cherenkovさんのコメント
nivoZoom化した画像にhoverすると透明になってほしいのかな

Cherenkovさんのコメント
ナビゲーションメニューの画像もnivoZoom化されて困ってるなら、 $('body').nivoZoom();のbodyの部分を変えて範囲を狭めればいいのでは。

門屋 徹郎さんのコメント
回答ありがとうございます。 補足を追加したあと上記のソースで試してみましたが動きませんでした。。

Cherenkovさんのコメント
回答を更新しました

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

質問者から

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>

2 ● oil999
●10ポイント

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

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

質問者から

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

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



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


関連質問

●質問をもっと探す●



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