そのため、ポートフォリオを設計し、その過程で jQuery を学習しています。私が抱えている問題は、画像をフェードさせ、整列させ、うまくフェードインさせるための順序にあります。私のサイト: http://graysonearle.com/newtest/にアクセスして、最初のボックス "Frog Utopia" をクリックすると、小さなギャラリーが開きます。横のサムネイルをクリックすると、画像が入れ替わり、説明が表示されます。問題は、最初のものを 2 回クリックしなければならないことです。これに加えて、画像サイズを切り替えると (一部は長いもの、一部は太いもの)、前の画像のプロパティが保持されるため、説明が整列しません。喜んで手伝ってくれるなら、このサイトにアクセスしてください。私の言いたいことがわかるでしょう。関連するコードは次のとおりです。
$(document).ready(function() {
// declare photo width variable
var photo_width = 0;
$('.chImg').click(function() {
// get img src and chop it up
var srcv = $(this).attr('src');
var sliced = srcv.slice(6);
// return the base number of the image for correspdonding div
// corresponding div is "d#"
var divnum = sliced.substring(0, sliced.length - 4);
// fade out active description div
$(".activeDescript").each(function() {
$(this).removeClass("activeDescript");
$(this).fadeOut(110);
});
// change picture
$("#chBox").fadeOut(110, function() {
$("#chBox").html("<center><img src='" + sliced + "'/></center>");
});
// vertical align
$("#chBox").vAlign();
$('#chBox').waitForImages(function() {
// wait for images before grabbing img width
$("#chBox img").each(function() {
photo_width = $(this).width();
$(".description").width(photo_width);
$("#d" + divnum).fadeIn(300);
// make this descript active
$("#d" + divnum).addClass("activeDescript");
});
$("#chBox").fadeIn(200);
});
});
});
および vAlign.js:
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);