שאלה לגבי SCROLL + ANIMATE בJQ - הוסטס

ShonLevi · 18-10-12, 01:34

שלום לכולם,
אני עובד כרגע על אתר חדש,
וכחלק מהפרויקט אני התבקשתי ליצור קישורים שיזיזו את האתר...
כלומר, ימין שמאל למטה למעלה... [כל האתר באותו הדף, בלי רענון דפים...]

(מי שרוצה להבין פשוט יכול להיכנס לאתר של מרינה מאקס' בלומין: http://www.marinamaximilian.com/ )

עכשיו, חיפשתי כבר באינטרנט קצת...
ומצאתי קוד ממש פשוט, שיפצתי קצת, והוא עובד לי מעולה... רק הבעיה היחידה היא שהתזוזה נראית נתקעת, לעומת מרינה ששם זה ממש חלק ויפה...

הקוד:

PHP קוד:


			
$("#section01").click( function(){

                $('html, body').animate({

                        scrollTop: $(".Website01_History").offset().top - 80,

                        scrollLeft: $(".Website01_History").offset().left - 390

                }, 700);

            });

אשמח אם תגידו לי מהי הבעיה,
או במידה ואתם מכירים דרך פשוטה יותר לעשות את הדבר המתבקש, להפנות אותי לקוד או מדריך...

תודה רבה, וסוף שבוע טוב לכולם

RAS · 18-10-12, 01:47

http://demos111.mootools.net/Fx.Scroll

בהצלחה.

ShonLevi · 19-10-12, 00:51

העתקתי בדיוק את הקודים משם... משום מה זה לא עובד לי... :\
יש שם הפניה לאתר נוסף, וגם את הקודים ששם הם נתנו ניסיתי וזה הפעם הזיז אבל בבום, לא בANIMATE, כלומר לא כתזוזה אלא כקפיצה...

עזרה? :\

RAS · 19-10-12, 01:00

אין סיבה שלא יעבוד לך.

הבהרה רק במקרה שאתה לא יודע: זה עם ספרית js שנקראת mootools, כלומר אתה חייב לצרף גם אותה. יכול להיות שאתה מאנקלד גם jquery באתר שלך ואז יש התנגשות, לכן תצטרך לקרוא מאמר כלשהו איך לשלב גם jquery וגם mootools באתר (יש הרבה באינטרנט, אפילו בעברית יצא לי לראות כמה).

אתה מוזמן לנסות את הדמו במסמך html חדש וריק ולראות שזה יעבוד לך.

**IgalSt** · 19-10-12, 01:05

ציטוט:

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

אין סיבה שלא יעבוד לך.

הבהרה רק במקרה שאתה לא יודע: זה עם ספרית js שנקראת mootools, כלומר אתה חייב לצרף גם אותה. יכול להיות שאתה מאנקלד גם jquery באתר שלך ואז יש התנגשות, לכן תצטרך לקרוא מאמר כלשהו איך לשלב גם jquery וגם mootools באתר (יש הרבה באינטרנט, אפילו בעברית יצא לי לראות כמה).

אתה מוזמן לנסות את הדמו במסמך html חדש וריק ולראות שזה יעבוד לך.

אני ממש ממש ממש לא ממליץ לכלול גם jquery וגם mootools ביחד.
אחת כמה וכמה אם זה בשביל לממש משהו כ"כ פשוט שבכלל אפשר לעשות באמצעות css transition ללא כל שימוש ב-js.

AlmogBaku · 19-10-12, 06:36

א. בבקשה שלח לינק
ב. אני חושב שהבאת חתיכת קוד קצת.. איך להגיד? מינורית?
זה יכול להיגרם מהמון סיבות.. 2 אנימציות בו-זמנית.. מימוש לא נכון..
ג. לא עדיף לכתוב פתרון יותר כללי מאשר פונקציית טריגר ספציפית לכל אלמנט?

ShonLevi · 19-10-12, 09:15

באמת שמתי גם את הJQ וגם את הMOOTOO ביחד...
כלומר, קישרתי לזה ואחר כך לזה... כנראה בגלל זה..
איך אני משלב?

===

הCSS TRANSITION לא נתמך בIE... אני צריך משהו שיעבוד בכל הדפדפנים...

===

א. אני אארגן איזה אחסון ואעלה את זה.
ב. כן כי זה כל הקוד

וזה עובד, רק כמו שאמרתי, זה זז לא חלק ויפה, אלא עם קצת תקיעות.
ג. ולא יודע אם עדיף, אני עובד על גדלים שונים לכל חלק, ולכן כל תזוזה צריכה להיות במיקומים שונים.. ככה שאני לא חושב שזה אפקטיבי... למרות שזה לא ממש משנה, אחרי שיהיה לי משהו שעובד אפשר תמיד לייעל את זה, הבעיה שכרגע אני תקוע מבחינת התזוזה, כי הדרך שאני חשבתי עליה כמו שאמרתי, זזה לא חלק, קיוויתי שתוכלו לעזור לי פה להבין למה, או להביא לי דרך שונה... והMOOTOO הזה נראה טוב, רק הבעיה שאני צריך שיסבירו לי כיצד לשלב JQ וMOOTOO ביחד... כי כרגע זה לא פועל...

AlmogBaku · 19-10-12, 09:39

ציטוט:

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

באמת שמתי גם את הJQ וגם את הMOOTOO ביחד...
כלומר, קישרתי לזה ואחר כך לזה... כנראה בגלל זה..
איך אני משלב?

===

הCSS TRANSITION לא נתמך בIE... אני צריך משהו שיעבוד בכל הדפדפנים...

===

א. אני אארגן איזה אחסון ואעלה את זה.
ב. כן כי זה כל הקוד

וזה עובד, רק כמו שאמרתי, זה זז לא חלק ויפה, אלא עם קצת תקיעות.
ג. ולא יודע אם עדיף, אני עובד על גדלים שונים לכל חלק, ולכן כל תזוזה צריכה להיות במיקומים שונים.. ככה שאני לא חושב שזה אפקטיבי... למרות שזה לא ממש משנה, אחרי שיהיה לי משהו שעובד אפשר תמיד לייעל את זה, הבעיה שכרגע אני תקוע מבחינת התזוזה, כי הדרך שאני חשבתי עליה כמו שאמרתי, זזה לא חלק, קיוויתי שתוכלו לעזור לי פה להבין למה, או להביא לי דרך שונה... והMOOTOO הזה נראה טוב, רק הבעיה שאני צריך שיסבירו לי כיצד לשלב JQ וMOOTOO ביחד... כי כרגע זה לא פועל...

jsfiddle

תעשה פונקציה שמוצאת את המיקום כל פעם.. אפשר ע"י שימוש ב data-* attribute

mayden · 19-10-12, 20:11

ציטוט:

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

אני ממש ממש ממש לא ממליץ לכלול גם jquery וגם mootools ביחד.
אחת כמה וכמה אם זה בשביל לממש משהו כ"כ פשוט שבכלל אפשר לעשות באמצעות css transition ללא כל שימוש ב-js.

תקן אותי אם אני טועה, אבל הCSS Transition לא עובד על IE..

**IgalSt** · 19-10-12, 20:43

ציטוט:

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

תקן אותי אם אני טועה, אבל הCSS Transition לא עובד על IE..

צודק בהחלט. CSS Transiton לא תמך ב-IE9 ומטה אבל כן נתמך ב-IE10.
זה המצב היחיד בו קיימות בעיות תמיכה.
מקור נתונים: Can I Use

לפיכך, בעיניי (וכמובן מאוד תלוי במקרה) ניתן לטפל בחוסר התמיכה הזה ברמת ה-feature detection והחלת polyfill במקרה של חוסר תמיכה.

כמובן שלא חסר מידע ופתרונות עבור css transition polyfill

18-10-12, 01:34	# 1
ShonLevi חבר מתקדם מיני פרופיל תאריך הצטרפות: Nov 2008 הודעות: 384	שאלה לגבי SCROLL + ANIMATE בJQ שלום לכולם, אני עובד כרגע על אתר חדש, וכחלק מהפרויקט אני התבקשתי ליצור קישורים שיזיזו את האתר... כלומר, ימין שמאל למטה למעלה... [כל האתר באותו הדף, בלי רענון דפים...] (מי שרוצה להבין פשוט יכול להיכנס לאתר של מרינה מאקס' בלומין: http://www.marinamaximilian.com/ ) עכשיו, חיפשתי כבר באינטרנט קצת... ומצאתי קוד ממש פשוט, שיפצתי קצת, והוא עובד לי מעולה... רק הבעיה היחידה היא שהתזוזה נראית נתקעת, לעומת מרינה ששם זה ממש חלק ויפה... הקוד: PHP קוד: `$("#section01").click( function(){ $('html, body').animate({ scrollTop: $(".Website01_History").offset().top - 80, scrollLeft: $(".Website01_History").offset().left - 390 }, 700); });` אשמח אם תגידו לי מהי הבעיה, או במידה ואתם מכירים דרך פשוטה יותר לעשות את הדבר המתבקש, להפנות אותי לקוד או מדריך... תודה רבה, וסוף שבוע טוב לכולם __________________ 🎧

19-10-12, 00:51	# 3
ShonLevi חבר מתקדם מיני פרופיל תאריך הצטרפות: Nov 2008 הודעות: 384	העתקתי בדיוק את הקודים משם... משום מה זה לא עובד לי... :\ יש שם הפניה לאתר נוסף, וגם את הקודים ששם הם נתנו ניסיתי וזה הפעם הזיז אבל בבום, לא בANIMATE, כלומר לא כתזוזה אלא כקפיצה... עזרה? :\ __________________ 🎧

19-10-12, 09:15	# 7
ShonLevi חבר מתקדם מיני פרופיל תאריך הצטרפות: Nov 2008 הודעות: 384	באמת שמתי גם את הJQ וגם את הMOOTOO ביחד... כלומר, קישרתי לזה ואחר כך לזה... כנראה בגלל זה.. איך אני משלב? === הCSS TRANSITION לא נתמך בIE... אני צריך משהו שיעבוד בכל הדפדפנים... === א. אני אארגן איזה אחסון ואעלה את זה. ב. כן כי זה כל הקוד וזה עובד, רק כמו שאמרתי, זה זז לא חלק ויפה, אלא עם קצת תקיעות. ג. ולא יודע אם עדיף, אני עובד על גדלים שונים לכל חלק, ולכן כל תזוזה צריכה להיות במיקומים שונים.. ככה שאני לא חושב שזה אפקטיבי... למרות שזה לא ממש משנה, אחרי שיהיה לי משהו שעובד אפשר תמיד לייעל את זה, הבעיה שכרגע אני תקוע מבחינת התזוזה, כי הדרך שאני חשבתי עליה כמו שאמרתי, זזה לא חלק, קיוויתי שתוכלו לעזור לי פה להבין למה, או להביא לי דרך שונה... והMOOTOO הזה נראה טוב, רק הבעיה שאני צריך שיסבירו לי כיצד לשלב JQ וMOOTOO ביחד... כי כרגע זה לא פועל... __________________ 🎧


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

18-10-12, 01:47	# 2
RAS חבר וותיק מיני פרופיל תאריך הצטרפות: Jul 2007 הודעות: 1,228	http://demos111.mootools.net/Fx.Scroll בהצלחה.

19-10-12, 01:00	# 4
RAS חבר וותיק מיני פרופיל תאריך הצטרפות: Jul 2007 הודעות: 1,228	אין סיבה שלא יעבוד לך. הבהרה רק במקרה שאתה לא יודע: זה עם ספרית js שנקראת mootools, כלומר אתה חייב לצרף גם אותה. יכול להיות שאתה מאנקלד גם jquery באתר שלך ואז יש התנגשות, לכן תצטרך לקרוא מאמר כלשהו איך לשלב גם jquery וגם mootools באתר (יש הרבה באינטרנט, אפילו בעברית יצא לי לראות כמה). אתה מוזמן לנסות את הדמו במסמך html חדש וריק ולראות שזה יעבוד לך.

19-10-12, 06:36	# 6
AlmogBaku חבר וותיק מיני פרופיל תאריך הצטרפות: Nov 2007 מיקום: מודיעין הודעות: 1,022	א. בבקשה שלח לינק ב. אני חושב שהבאת חתיכת קוד קצת.. איך להגיד? מינורית? זה יכול להיגרם מהמון סיבות.. 2 אנימציות בו-זמנית.. מימוש לא נכון.. ג. לא עדיף לכתוב פתרון יותר כללי מאשר פונקציית טריגר ספציפית לכל אלמנט?

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)