עזרה בביצוע hide ב jquery

[Ori The Man]

אהלן,
אני עושה מעיין גלריה באמצעות JQUERY ויש לי בעיה כאשר אני עושה hide ו show התמונה מופיעה לפני ה show ורק אז זה עושה את זה
אתם יכולים לראות
http://www.oritheman.net/cms/gal.php#

$('#Images').delegate('img','click', function(){
	$('#Left-Side').fadeOut("slow")
	
	$('#Left-Side').fadeIn("slow");
	$('#largeImage').attr('src',$(this).attr('src').replace('thumbs','newsize'));
	$('#description').html($(this).attr('alt'));

איך אפשר שרק אחרי שיבוצע ה hide כל תהליך החלפת התמונה יבוצע

[meshuga]

http://api.jquery.com/fadeOut/
תכניס את כל מה שאחרי fadeOut בתור פונקציית callback...תסתכל על הדוגמא שם נראה לי שאתה תבין לבד..זאת עם הAnimation complete

[IgalSt]

כמה הערות לגבי קוד ה-jQuery עצמו, כדי לשפר וליעל אותו:

1. מומלץ להשתמש ב- on

2. מומלץ בחום לעשות cache לאובייקטים של jQuery ולא לפזר דולרים על ימין ועל שמאל.

3. כדאי לשרשר מספר פעולות ביחד. אם אתה עושה על אותו האלמנט fadeIn

(4. סטיילינג: תחליט אם אתה משתמש בגרש בודד או גרשיים, ותהיה עקבי)

כך שאת הקוד שלך הייתי משנה ככה:

$('#Images').on("click", "img", function(){
	var img = $(this);
	var leftSide = $("#Left-Side");
	leftSide.fadeOut("slow", function(){
                 leftSide.fadeIn("slow");
                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));
                 $("#description").html(img.attr("alt"));
	});
});

[Ori The Man]

תודה רבה לשניכם על העזרה!

בעיה קטנה אחרת
א. שונא אקספלורר!! (למרות שאני משתמש בו חח)
ב.ברגע שאני מבצע עיגול פינות עם CSS (בעזרת PIE כמובן) זה לא עושה פייד,רק בדפדפנים האחרים,מכירים את הבעיה הזאת?

[בניה]

נכתב במקור על ידי Ori The Man

תודה רבה לשניכם על העזרה!

בעיה קטנה אחרת
א. שונא אקספלורר!! (למרות שאני משתמש בו חח)
ב.ברגע שאני מבצע עיגול פינות עם CSS (בעזרת PIE כמובן) זה לא עושה פייד,רק בדפדפנים האחרים,מכירים את הבעיה הזאת?

הPIE הזה זה חרבנה, אם פייסבוק לא עושים פינות עגולות ל IE7/8 גם אתה יכול שלא

[Ori The Man]

נכתב במקור על ידי בניה

הPIE הזה זה חרבנה, אם פייסבוק לא עושים פינות עגולות ל IE7/8 גם אתה יכול שלא

חחחחח אז אתה ממליץ להוריד את זה?

[Itay]

אם יש לך רקע אחיד מאחורי התמונה, ובא לך להשקיע קצת בקוד אז אתה יכול ליצור פינות מעוגלות ל-IE 7/8 עם תמונה פשוט ואז לעטוף את התמונה ב-div עם position: relative ולהצמיד 4 spanים עם התמונות של הפינות המעוגלות לצדדים עם position: absolute

ואז כשאתה מחליף תמונה אתה משנה את הגודל של ה-div העוטף לפי התמונה החדשה וה-spanים נשארים צמודים לפינות


למרות שאני אישית לא הייתי טורח

[Ori The Man]

אני כניראה יוותר... חחחח

אתם מכירים דרך יצירתית לעשות דפים ע"י query?
אני רוצה להכניס 12 תמונות בעמוד,אני יכול ללכת על הדרך הרגילה והפשוטה עם GET אבל אני רוצה לנסות לעשות את זה עם jquery כדי שלא יהייה רענון בין עמוד לעמוד.
מכירים איזו שיטה טובה?

[Itay]

אותו דבר כמו שהיית עושה עם PHP+GET, רק שאת המעבר במקום לעשות עם קישור (למעשה, עדיף כן לעשות קישור אבל לדרוס את הפעולה שלו עם JS כדי שגוגל ודפדפנים בלי JS בעקרון יוכלו לעבור עמודים) לעשות עם בקשת ajax
ובהתחשב במה שהוספתי בהערה - הייתי מוסיף פרמטר לכתובת שאתה קורא אליה דרך ה-ajax שאומרת נגיד clean=true ואז מה שיוצג יהיה רק התוכן שאתה באמת צריך להחליף, ככה שגוגל לדוגמא יקרא את זה בלי ה-clean ויראה את כל האתר

[perfeito]

נכתב במקור על ידי IgalSt

כמה הערות לגבי קוד ה-jQuery עצמו, כדי לשפר וליעל אותו:

1. מומלץ להשתמש ב- on

2. מומלץ בחום לעשות cache לאובייקטים של jQuery ולא לפזר דולרים על ימין ועל שמאל.

3. כדאי לשרשר מספר פעולות ביחד. אם אתה עושה על אותו האלמנט fadeIn

(4. סטיילינג: תחליט אם אתה משתמש בגרש בודד או גרשיים, ותהיה עקבי)

כך שאת הקוד שלך הייתי משנה ככה:

$('#Images').on("click", "img", function(){
	var img = $(this);
	var leftSide = $("#Left-Side");
	leftSide.fadeOut("slow", function(){
                 leftSide.fadeIn("slow");
                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));
                 $("#description").html(img.attr("alt"));
	});
});

function els () {
	var elems = {
		left: $('#Left-Side'),
		large: $('#largeImage'),
		desc: $('#description')
	};
	return (function () {
		return elems;
	}());
}

$('#Images').on("click", "img", function(){
	var self = $(this)
		,	elems = els();

	elems.left.fadeOut('slow', function () {
		var src = self.attr('src').replace('thumbs', 'newsize');
		elems.left.fadeIn('slow');
		elems.large.attr('src', src);
		elems.html(self.attr('alt'));
	});
});

אם כבר, מדברים על מהירות