1

FadeIn / FadeOutを扱うスレッドはたくさんありますが、これらの関数の使用には多少独特な問題があると思います。帯域幅の可能性があるとは信じがたいですが、ローカルホストで問題なく動作し、オンラインではうまく機能しない場合（10mbsアカウント@ Comcast）、どうすればよいかわかりません。

わかった。一言で言えば、DBはPHPgd_libraryを介して一連のサムネイルを提供します。id="placeholder"の450pxのプレースホルダー画像が大きいdivがあります

<p class="placeholderContainer"><img id="placeholder" 
src="product_getimage.php?path='.$path.'&amp;size='.$size.'" border="0" alt="" /></p>

親指はこの形のループによって吐き出されます

<a href="../images/products/'.$catNAME.'/'.$imgLOC.'/'.$imgName.'" 
title="'.$imgTitle.'"><img src="product_getimage.php?path='.$pathT.'&
amp;size='.$sizeT.'" border="1" id="'.$imgName.'" alt="" /></a>

すべての非常に簡単なもの。あなたはそれを実際に@transparentcable.comで見ることができます。製品ボタンをクリックしてから、オーディオケーブルをクリックします。左側のサイドバーはリンクのリストです。それらのいずれかをクリックすると、上記の構成で製品がロードされます。

これが、親指で単純なクリックイベントを実行するために使用されているjqueryです（ソースコードにすべてあります）

$(document).ready(function() {
 $('#prod-thumbs a img').click(function() {
  var selImg = $(this).attr('id');
  var imagePath = "../images/products/<?php echo strtolower($catNAME);?>/<?php echo 
  $imgLOC; ?>/";
  var finalImg = imagePath + '/' + selImg;
  $('img#placeholder').fadeOut(500, function() {
   $('#placeholder').fadeIn(300).attr({src:finalImg});
   });
 return false;
 });
});

本質的には、画像のsrcが変更された数年前の古いjavascript画像スワップのバリエーションにすぎません。ここでも同じです。

ただし、この場合、fadeOutはその役割を果たしますが、プレースホルダーイメージはまだ存在しているため、fadeIn関数が実行されるとすぐに置き換えられます。私が言ったように、ここのオフィスではWAMPシステムで完璧に動作しますが、オンラインではその厄介な小さなつまずきがあります。

すべてがソースコードにはっきりと表示されており、提案があれば大歓迎です。

4

1 に答える 1

0

マーク B はここで正しい方向に進んでいると思います。やってみました：

$('#placeholder').attr({src:finalImg});
$('#placeholder').fadeIn(300);

?

于 2013-02-17T23:35:42.217 に答える