هل سئمت المواقع التقليدية؟ هل سئمت الجمود في المواقع الإلكترونية؟ هل تحب الإبداع؟ هل تحب ابتكار أفكار وحركات جديدة في التصميم؟ هل ترغب بصنع تأثيراتك الخاصة؟ هل ترغب بمستوى آخر من ال جي كويري؟ اذن تعلم معنا ^_^ قم بزيارة الموقع 2nees.com لتحميل الملف مع كامل الأمثلة ... (دورة مجانية)

1. دٚسح: jQuery Effects
رمذ ٠ :ُ أ ١ٔظ ؽى ذّ أثٛؽ ١ّذ
ا جٌش ٠ذ الا ىٌزشٚ ٟٔ:
aneeshikmat@2nees.com, aneeshikmat@gmail.comanees_hikmat@yahoo.com
ا ٌّٛلغ الا ىٌزشٚ ٟٔ: 2nees.com
بسم الله الرحمن الرحيم
1
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ

2. الفهرس 1
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
2
 ا مٌّذ خِ
 زِط جٍبد ا ذٌٚسح
addClass
removeClass
Blind
Bounce
Clip Effect
Drop effect
fadeTo
Explode
fold

3. الفهرس 2
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
3
Hide Effect
Show Effect
Highlight Effect
Puff Effect
EffectPulsate
Scale Effect
EffectShake
Size Effect
EffectSwitch Class
Toggle Effect

4. الفهرس 3
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
4
toggleClass
transfer Effect
Animate Effect
 ا خٌبر خّ

5. المقدمت
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 5
ا ؾٌ ذّ لله ا زٌٞ ثؾ ذّ رز ا ؼٌٕ ,ُ ا ؾٌ ذّ لله سة ا ؼٌب ١ٌّ ,ٓ ثفن الله
رؼب ٌٝ ٚسمٛا ألذ ىٌ ا ١ٌٛ أؽجزٟ ٚئخٛرٟ دٚسح jQuery Effect ,
ز٘ ا ذٌٚسح ا زٌّٛامؼخ عززى ثار الله رؼب ٌٝ ػ ثؼل اي Effects ا زٌٟ
٠ ىّ أ نٔ ١فٙب ٚ زٔؼب ؼِٙب زٌؼطٟ ؽى ع بّ ٌٟ سائغ, ٚرفبػ ٠جٙش
ا غٌّزخذ ,َ ثذلا ا طٌشق ا زٌم ١ٍذ ٠خ ٚا زٌٟ ىٔضش اعزخذا ِٙب ..
ٚأروشو ئخٛرٟ, أ ز٘ ا ذٌٚسح ا زٌّٛامؼخ, ٟ٘ زٔبط ػ ثؾشٞ, لذ
٠ق ١ت ٚلذ ٠خطئ, فا أفج بٕ, فجفن الله رؼب ٌٝ ٚسمٛا ,ٔٗ ٚئ أخطئ بٕ, ف أ فٔغ بٕ ... غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ز٘ا ا ؼٌ ا زٌّٛامغ,
ٚ ٠غفش بٌٕ ٚ ٌٛا ذٌ ٠ بٕ ٚ غٌ ١ّغ ا غٌّ ١ٍّ ,ٓ ٚأ ٠شؽ بّٕ ثشؽ زّ ٚػفٛ ٚ غِفشر .ٗ..
ثغ الله ٚػ ٍٝ ثشوخ الله جٔذأ....

6. متطلباث الدورة
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 6
 ؼِشفخ ثبي jQuery ..ٚ ز٘ أ مٔطخ...
 فٟ ز٘ ا ذٌٚسح ل بّٕ ثزؾ ١ّ فٍِبد اي jQuery ui, jQuery-1.10 .. ٚعزغذ ب٘
داخ فٍِ اي js
 ؼِشفخ اي css
 ؼِشفخ اي html
لِاؽظخ:
ئ ز٘ ا ذٌٚسح عززى ػ اي Effect داخ اي jQuery .. زٌ هٌ ٠ ضٍ هِ ػ ٍٝ
أل رمذ ٠ش .. ؼِشفخ و ١ف ٠ ىّ بٕٕ اعزخذا اي jQuery .. ٚو ١ف ٠ ىّ بٕٕ ا زٌؼب غِ اي Selector ٚاي Event ثؾى خبؿ.. ٚ ٠ ىّ هٕ ا ٠غبد ر هٌ ا ؽبء الله
داخ ا ذٌٚسح ا زٌب ١ٌخ:
8%D1%B8%D88%9%AF%D8nees.com/ar/content/%D2
http:// jquery-9%A

7. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 7
وزبة: بِ ٠خجش ٟٔ ث أثٟ ػ ا ؾٌ ١بح ىٌش ٠ ا ؾٌبر ٌٟ

8. jQuery Effects
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
8

9. 1 ) addClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 9
ع ١ّؼ بٕ ٠ؼ ز٘ ا ذٌا خٌ, ٚا زٌٟ غٔزخذ ِٙب لإمبفخ Css Class لأٞ ػ قٕش شٔ ٠ذ ,ٖ ٚ ىٌ وب ذٔ الامبفخ ػ ٍٝ ثؾى رم ١ٍذٞ, ٚثذٚ ٚعٛد ؽشوخ رؼط ١ه غٌّخ رفبػ ١ٍخ غِ ز٘ا
٠ ىّ بٕٕ أ مٔٛ ثز هٌ .. ا ؾٌذس, ىٌ ا ٢
ا قٌ ١غخ ا ؼٌب خِ ا زٌٟ ع زٕؼب ؼِٙب ٟ٘ :
.addClass( className[,duration ] [, easing ] [, complete ] )
ؽشػ بِ ر روش :ٖ
أٚلا اع ا ىٌلاط ا زٌٞ شٔغت ثبمبفز ..ٚ ٛ٘ اعجبسٞ..
صب ١ٔب: ا خٌقبئـ ا زٌٟ رٛعذ داخ اي [] ٟ٘ خقبئـ اخز ١بس ٠خ ٚرؼ ٟٕ:
أ( duration : ٚ ٛ٘ ا ٌٛلذ ا غٌّزغشق effect ؽزٝ ٠ زٕٟٙ,ٚ ٠ ىّ أ رنغ داخ ز٘ ا مٌ ١ خّ ػ ٍٝ ؽى سل أٚ ـٔ, ضِلا , ارا ر ٚمغ ا مٌ ١ خّ 3000 ع ١جمٝ فٟ ؽ ١ض ا زٌ فٕ ١ز
غٌب ٠خ 3 صٛا ,ْ ٚثٙزا فا و ا فٌ ٠ ضّ صب ١ٔخ, أٚ ثا ىِب بٔ ٚمغ ” fast “ وم ١ خّ قٔ ١خ
زٌٍ فٕ ١ز...

10. 1 ) addClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 10
ة( easing : ٟ٘ ػجبسح ػ دا خٌ رغزخذ زٌٍؾى ثغشػخ ع ١ش اي
animation مٔطخ ا ٌٝ أخشٜ , ٚ ٟ٘ ؽغت اي jQuery core ر مٕغ ا ٌٝ لغ ١ّ ,ٓ الاٚي liner ٚا ضٌب ٟٔ: Swing ..
فٟ الأٚي )اي Liner ٠ىٛ عشػخ ا زٌؾشن صبثز هٛاي ) animtaion ..
أ بِ فٟ ا ضٌب ٟٔ ) اي Swing ( : فزىٛ عشػخ ا زٌؾشن ثط ١ئخ ػ ذٕ ا جٌذا ٠خ
ٚػ ذٕ ا ٌٕٙب ٠خ ٚرخز فٍ ا غٌشػخ فٟ ا ٌٛعو .. ٚ ز٘ ٟ٘ ا ؾٌب خٌ ا ضٌب ١ٔخ.. ىٌ بٕ٘ن خقبئـ أخشٜ, ثؾ ١ش ٠ ىّ هٕ ػ Customize ٌٙب .. ٠ ىّ هٕ ا ٢
ضِلا اعزخذا اي easeInOutQuint ٚ غِ ّٛػخ أخشٜ اي easing animation .. لاؽع ا ؾٌش ٠ؾخ ا زٌب ١ٌخ ..- <

11. 1 ) addClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
11
ؽب ذ٘ بٕ٘ غِ ّٛػخ اي Easing Animation
ا زٔم ا ٌٝ ا ؾٌش ٠ؾخ ا زٌب ١ٌخ--

12. 1 ) addClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
12
و ؾِٕ ٕٝ فٟ ا قٌٛسح ا غٌبثمخ ٠ ضّ عشػخ اي Animation ػ ا زٔمب ٌٙب ث ١
ا مٌٕبه, ثبلإمبفخ ا ٌٝ ر هٌ .. ػ ذٕ بِ رشٜ ا خٌو خبسط مٔطخ ؼِ ١ خٕ ..فبػ أ animation ع ١خشط ٚ ٠ؼٛد ٚوأ اسرذاد.. وزؾج ١ ثغ ١و اسرذاد وشح
ػ ٍٝ ؽجبن ا شٌّ ِٝ ^_^ ...
زٌزنؼ ا فٌىشح أوضش .. ٠ ىّ هٕ ا ظٌٕش ا ٌٝ
http://easings.net/ ... ز٘ا ا ٌّٛلغ ع ١جغو ػ ١ٍه فٙ ا ٌّٛمٛع ..
دلك ػ ٍٝ ا إٌّؽش الأؽ شّ ا زٌٞ ع ١ظٙش ػ ذٕ hover ػ ٍٝ أٞ فٛسح
..ٚا ظٔش ؽشوز ..

13. 1 ) addClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
13
ؼٌٕ ١ذ رشر ١ت الأفىبس .. مٌذ رى بٍّٕ ػ .addClass( className[,duration ] [, easing ] [, complete ] )
ٚرؾذص بٕ ػ ا خٌ ١بساد اي className, duration, easing ٚا ٢ْ
ط( اي complete : ٚ ٟ٘ خبف ١خ ر طٕ كٍ ػ ذٕ الا زٔٙبء اي animation effect ...
ٚا ٢ ؾٌٕب ذ٘ ؼِب .. ضِلا .. زٌٛمٛػ ا فٌىشح ..

14. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
14
الاعلا بِ ٛ٘, ذٌٍوزٛس قِطفٝ ؾِ ّٛد

15. 2 ) removeClass
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ 15
ٚا ٢ و بّ ل بّٕ ثامبفخ Effect . ػ ذٕ ل ١ب بِٕ ثامبفخ ولاط.. ٠ ىّ بٕٕ امبفخ
Effect ػ ذٕ ؽزف class ... ؼِ ١
اقٌ ١غخ ا ؼٌب خِ ٟ٘:
.removeClass( className[,duration ] [, easing ] [, complete ] )
و بّ رلاؽع فٟٙ رؾزٛٞ فٔظ ا خٌقبئـ ٚا خٌ ١بساد addClass .. زٌ هٌ
ع ىٕزفٟ ثبعزؼشاك ضِبي ػ ز٘ ا خٌبف ١خ ..

16. 3 ) Blind Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
16
رغزخذ ز٘ ا خٌبف ١خ ؼٌ Animation Effect ػ ٍٝ ؽى عؾت, ضِ عؾت
ا غٌزبئش ^_^..وزؾج ١ ,ٗ ٚ ٠ ىّ أ ٠ىٛ ز٘ا ا غٌؾت ػ ٍٝ ارغب ب٘د, ضِ لأػ ٍٝ
أٚ لإعف ,ً ١ّ ٠ أٚ ؽ بّي..., ٚ ٠غزخذ ز٘ا ا غٌؾت لإخفبء ؾِزٜٛ ؼِ ١ أٚ
... لإظٙبس ؾِزٜٛ ؼِ ١
اقٌ ١غخ الافزشام ١خ:
selector.hide|show|toggle( "blind",{arguments}, speed );
ٟ٘ فمو وزبثخ Blind داخ Toggle أٚ hide أٚ show ...ٚ ٠ ىّ ا رؾزٛٞ
خ ١بساد ضِ up,down,left,right,vertical,horizontal ٚ ٠ ىّ اعزخذا ِٙب ػ هش ٠ك
ٚمغ اي direction .. لاؽع ا ضٌّبي ا زٌب ٌٟ:
$(".target").hide( "blind",{direction: "horizontal"}, 1000 );
*( لِاؽظخ: فٟ ا ؾٌب خٌ الافزشام ١خ ٠ىٛ ع ١ش الارغب ) up )

17. 3 ) Blind Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
17
مٌذ ر اعزخذا ا ذٌا خٌ hide لإخفبء ا ؼٌ قٕش, ٚ ىٌ غِ Effect , ٚ ز٘ا اي
Effect وب ٛٔع Blind .. قٗد ق جَ بخحد دٌ احجا اىس سٍ ىع يَ تٍ
اىسحب, بالإضافت اىى اى ق٘ج اى سَخغسق ىرىل ..فنا الاحجا افق ,ً
اٗى ق٘ج اى سَخغسق ثا تٍّ اٗحدة
ؽب ذ٘ ز٘ا ا ضٌّبي:

18. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ
أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
18
الأع ٍٛة الألٜٛ ٚالأ طٌف فٟ ا زٌغ ١١ ش بٌٕ ٠ف ػجذا شٌؽّٓ

19. 3 ) Bounce Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
19
٠مٛ ز٘ا اي animation ػ ٍٝ اخفبء أٚ اظٙبس ا ؼٌ قٕش ػ ٍٝ ؽى ا ز٘ضاص أٚ اسرذاد
لأػ ٍٝ ٚأعف ..
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "bounce“,{ direction, times, distance }, speed );
ؽشػ اقٌ ١غخ ا ؼٌب خِ:
(
1bounce : اع اي effect
(
2Direction : الارغب ا خٌبؿ ثٙزا اي effect
(
3Times : ٚ ٛ٘ ػذد شِاد الاسرذاد ا خٌبفخ ثٙزا اي effect(4 distance : ٚ ٛ٘ ا جٌؼذ ا خٌبؿ ثبلاسرذاد, أٞ بِ ٟ٘ أثؼذ غِبفخ ٠ ىّ ا ٌٛفٛي ا ١ٌٙب
ٚالاسرذاد ػ ٕٙب, ٚرمبط ثب جٌىغ (
5Spees : ٚ ٟ٘ عشػخ اي effect ..أٚ ا ضٌ ا غٌّزغشق ؽزٝ ٠ زٕٟٙ ز٘ا اي effect

20. 3 ) Bounce Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
20
٠ ىّ هٕ هجؼب .. اعزخذا ز٘ ا خٌقبئـ ؼِب, اٚ اعزض بٕء عضء ٚالإثمبء ػ ٍٝ
عضء.. ز٘ ا خٌ ١بساد اخز ١بس ٠خ ثبعزض بٕء اع اي effect ٚ بٕ٘ ٛ٘ Bounce ..
*( لِاؽظخ: ٠ ىّ هٕ اعزخذا ا ذٌا خٌ effect , زٌ فٕ ١ز effect ؼِ ١ رش ٠ذ ,ٖ أٚ سؤ ٠ز .ٗ
ٚ ز٘ا ٠ؼ ٟٕ ا ىِب ١ٔخ اؽذاس اي effect دٚ اظٙبس أٚ اخفبء دائ بّ, ٚ ز٘ا ٠غبػذن
ػ ٍٝ ػ غٌّبد ف ١ٕخ سائؼخ ػ ذٕ ا ؼٌ ...
*( لِاؽظخ 2 : ثب غٌٕجخ time ..فا ٠ز ص ٠بدح قٔف ؽشوخ ػ ٍٝ ا ؼٌذد ا ٌّٛعٛد
غٌب ٠بد الاخفبء أٚ الاظٙبس ,,,ٚ ز٘ا ٠ؼطٟ ظِٕش ع بّ ٌٟ سائغ... ثبلإمبفخ ا ٌٝ ر هٌ
فا ػذد شِاد الاسرذاد ٠غت أ ٠ىٛ ػذد فؾ ١ؼ ..

21. 4 ) Clip Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
21
ز٘ا اي effect ٠مٛ غ ٍٝ اخفبء أٚ اظٙبس ا ؼٌ قٕش ػ هش ٠ك انٌ الأػ ٍٝ ٚالأعف ثبرغب ا زٌّٕقف .. ٚ ز٘ا فٟ ا ؾٌب خٌ الافزشام ١خ لٌإرغب ,ٖ
ٚ ٠ ىّ رغ ١١ ش ا ٌٝ أفمٟ, ف ١قجؼ انٌ ا ١ّ ١ٌ ٚا ١ٌغبس...
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "clip",{direction}, speed );
(
1Clip : اع اي effect
(
2Direction : ٚ ٛ٘ ارغب ا ؾٌشوخ
(
3Speed : ا غٌشػخ, ٚ ٟ٘ ا ٌٛلذ ا غٌّزغشق لا زٔٙبء اي effect .

22. 5 ) Drop Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
22
ز٘ا اي effect ٠مٛ ػ ٍٝ اخفبء أٚ اظٙبس ا ؼٌ بٕفش ػ هش ٠ك ا ذٌ ظِ ث ١ اع ٍٛث ١
ٚ بّ٘ اي fade ٚ slide .. ع ١ّؼ بٕ ؼٔشف ػ ا اي fade ٟ٘ اخزفبء اٚ اظٙبس
ا ؼٌ قٕش ثؾى رذس ٠غٟ ... ٚاي slide ٟ٘ ؽشوخ اظٙبس اٚ اخفبء ا ؼٌ بٕفش
ػ ٍٝ ؽى اعذاي ...
ٚا ٢ ر ا ذٌ ظِ ث ١ الأع ٍٛث ١ ,ٓ ٚافجؼ ثب ىِب بٕٔ اعزخذا ِٙ بّ ؼِب ػ هش ٠ك
Drop effect ..
اقٌ ١غخ ا ؼٌب خِ ٟ٘:
selector.hide|show|toggle( "drop",{direction}, speed );
بِ ر روش عبثمب .. ٠ طٕجك بٕ٘ ..
ٚالارغب ب٘د ٟ٘ : left, right,top, bottom

23. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
23
ا نٌننن فٕكظ رجىننننٟ ػ نٍنننٝ ا نٌنننذ ١ٔب ٚلننننذ ػ نٍّنننذ *** أ ا غٌننننؼبدح ف ١ٙننننب رننننشن نِنننب ف ١ٙننننب
لا داسٌ نٌٍّنننشدء ثؼننننذ ا نٌّنننٛد ٠غكى ٕٙنننن ب*** ئلا ا زٌننننٟ وننننبم لجنننن ا نٌّنننٛدد ثب ١ٔٙننننب
فنننننا ث بٕ ن٘نننننب ثخ ١ننننننش هننننننبة غِىكٕننننن *** ٚئ ث بٕ ن٘نننننب ثؾننننننش خننننننبة ثب ١ٔٙننننننب
أ ِٛا نٌٕننننب نٌننننزٚٞ ا ١ٌّنننننشاس غٔكّؼٙنننننب *** ٚدٚس نٔننننب خٌنننننشاة ا نٌننننذ ش٘ جٔ ١ٕٙنننننب
أ ٠ننن ا نٌٍّننٛن ا زٌنننٟ وب نٔننذ غِ طٍ ننن خٕ *** ؽزنننٝ عنننمب ب٘ ثىنننأط ا نٌّننٛد عنننبل ١ٙب
فىنن نِنذائ فننٟ ا ٢فننبق ل نن ذ ث ١ٕننذ *** أ غِننذ خشاثننب ٚأف نٕنٝ ا نٌّنٛكد أ ١ٍ٘ٙننب
لا رشدوم ئ ٌٝ ا ذٌ ١ٔب ٚ بِ ف ١ٙ ب *** فب ٌّٛد لا ؽه ٠كف ١ٕ بٕ ٚ ٠كف ١ٕٙب
ؽؼش الا بِ ػ ٍٟ ث أثٟ
هب تٌ وش الله ٚعٙ

24. 6 ) fadeTo
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
24
ز٘ ا خٌبف ١خ ...ثجغبهزٙب ..رؼطٟ ٛٔع اي effect ا زٌٞ ٠جذٚا ع ١ّلا غٌٍّزخذ ,َ
٠غزخذ ز٘ا اي effect و بّ ٠غزخذ اي fadeIn, fadeOut ىٌ غِ اخزلاف
ثغ ١و .. ٚ ٛ٘ الاخزفبء ا زٌذس ٠غٟ ٚفٛلا ا ٌٝ مٔطخ ؼِ ١ خٕ!!
ثأع ٍٛة آخش ..ػ ١ٍّخ الاخزفبء ا زٌٟ رز ثؾى رذس ٠غٟ رزوش بٔ ثبي opacity ..
ٚثز هٌ ػ ذٕ بِ ٠غبٚٞ اي opacity ففش .. فا ا ؼٌ قٕش ع ١ىٛ خِزفٟ ر بّ بِ
.. ىٌ أ بٔ أدػ ٠ق ا ٌٝ اقٌفش.. ٚعألٛ ثبخز ١بس غٔجخ اي opacity ا زٌٟ
عزجمٝ ا ؼٌ قٕش ؽ ١ئب شِئ ١ب ^_^..
اقٌ ١غخ ا ؼٌب خِ :
selector.fadeTo(speed, opacity[, callback]);
.....ا ٌٝ ا ؾٌش ٠ؾخ ا زٌب ١ٌخ

25. 6 ) fadeTo
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
25
٠مقذ ثبي speed : ٟ٘ عشػخ ر فٕ ١ز اي effect
ٚ ٠مقذ ثبي opacity دسعخ ا ؾٌفبف ١خ ا زٌٟ ع ١زٛلف ػ ذٕ ب٘ ا ؾٌذس.. ٚ ٠غت ا رىٛ ا مٌ ١ خّ ث ١ اقٌفش ٚا ٌٛاؽذ ... ٠ؼ ٟٕ ضِلا 0.3 ... ٚ ٠غت ػ ١ٍه
رؾذ ٠ذ ا مٌ ١ خّ ..-اعجبس ٠خ-
ٚ ٠مقذ دائ بّ ثبي callback function بٕ٘ .. أٞ ػ ذٕ بِ ٠ز اوز بّي اي effect
أٚ ر فٕ ١ز ... بِرا رش ٠ذ ا ٠ؾق .ً.و ضّبي ..اهجغ ر ذّ ا ؼٌ ١ٍّخ ث غٕبػ ..
ا ظٔش ا ضٌّبي ا زٌب ٌٟ:

26. 7 ) Explode Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
26
ثزؼشف php ؟ ٚثزؼشف رزؼب غِ اي array ؟ ... ه ١ت ..ا غٔب ا ٌّٛمٛع
..لأ ٛٔ بِ ا ٌٛ دخ ^_______^
Explode ز٘ا اي effect ٠مٛ ػ ٍٝ رمغ ١ ا ؼٌ قٕش ا ٌٝ لطغ ..ٚػ ذٕ
اعزخذا ز٘ا اي effect لإظٙبس أٚ اخفبء ا ؼٌ قٕش.. ٠ز ثؼضشح أٚ رغ ١ّغ
ا مٌطغ ..ٚثٙزا ٠ؼطٟ effect ؽذ ٠ذ ا شٌٚػخ ^_^...
اقٌ ١غخ ا ؼٌب خِ :
selector.hide|show|toggle( "explode",{pieces}, speed );
ا ٌٝ ا ؾٌش ٠ؾخ ا زٌب ١ٌخ ----

27. 7 ) Explode Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
27
Pieces ٟ٘ ػذد ا مٌطغ ا زٌٟ ع ١مغ ا ١ٌٙب ا ؼٌ قٕش ػ ذٕ ا زٌغ ١ّغ اٚ ا جٌؼضشح ..
ٚفٟ ا ؾٌب خٌ الافزشام ١خ ٠ىٛ ػذد ا مٌطغ ٛ٘ 9 ....
٠ز رمغ ١ ا مٌطغ ػ ٍٝ ؽى شِثؼبد ..ٚا ؼٌذد ا زٌٞ ٠ٛمغ ٠غت أ ٠ىٛ ػذد فؾ ١ؼ, ٚفٟ وب ا زٌمغ ١ ؾٌى ٠ؾج ا شٌّثغ .. ع ١ز رمش ٠ت
ا مٌطغ لألشة ؽذ ىِّ ؽى ا شٌّثغ ...
شٌٕٜ ضِبلا : ^_____________^

28. 8 ) Fold Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
28
ز٘ ا ؾٌذس ٠ؾج ػ ١ٍّخ ا طٌٟ ٌٍٛسق...
ا قٌ ١غخ ا ؼٌب خِ :
selector.hide|show|toggle( "fold",{arguments}, speed );
Fold : اع اي effect ..
Arguments :
1 ) horizFirst : ٚ ٛ٘ ٠جذأ ا طٌٟ ثؾى أفمٟ؟, ٠ ىّ هٕ ٚمغ اؽز بّ ١ٌ true أٚ false ,
هجؼب ثب ؾٌب خٌ الافزشام ١خ false ..
2 ) size : ٚ ٟ٘ ر ضّ ؽغ ا طٌٟ ؼٌٍ قٕش, ٚ ٟ٘ ئ بِ أ رىٛ سل ,ُ ٚئ بِ ـٔ...
*( لِاؽظخ: ٠فن ٚمغ اي size ضِلا 30 .. ٚر هٌ زٌن ػ ز٘ا اي effect ..
ؽب ذ٘ ا ضٌّبي:

29. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
29
) لا ئ ئلا الله ا ؼٌظ ١ ا ؾٌ ١ٍ ,لا ئ ئلا الله سة ا ؼٌشػ ا ؼٌظن ١
, لائ نٌننن ئلا الله سة ا غٌنننن ّٛاد ٚسة الأسك ٚسة ا ؼٌننننشػ
) ا ىٌش ٠
أؽٙذ أ لا ا الا الله... ٚأؽٙذ أ ؾِ ذّ ػجذن ٚسعٛ هٌ

30. 9 ) Hide Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
30
ع ١ّؼ بٕ اعزخذ اي hide داخ اي jQuery ... ىٌ ..وب ذٔ ػ ١ٍّخ الاخزفبء
رغ ١ش ث غٕك ٚاؽذ .. فمو اخزفبء ثؼذ ذِح ص ١ِٕخ ؼِ ١ خٕ ..ٚ ىٌ ٠ ىّ ٟٕٕ
ثبلإمبفخ ا ٌٝ ر هٌ اعزخذا ثؼل ا خٌقبئـ .. زٌٍؾى ثؼ ١ٍّخ الاخزفبء
..ا ظٔش اقٌ ١غخ ا ؼٌب خِ:
.hide( effect [, options ] [, duration ] [, complete ] )
اي effect ٛ٘ أٞ دا خٌ روش بٔ ب٘ ..أٚ رزوش ثؼذ ٠ ىّ اعزخذا ِٙب ؼٌ رأص ١شاد ؼِ ١ خٕ...
Option ٠ ىّ ٟٕٕ ٚمغ ا خٌقبئـ ا خٌبفخ ثبي : effect ا زٌٞ ر ٚمؼ ..
أ بِ ا جٌبلٟ فٙٛ ؾِبث غٌٍبثك..
ا ظٔش ا ضٌّبي:

31. 10 ) Show Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
31
ع ١ّؼ بٕ اعزخذ اي show داخ اي jQuery ... ىٌ ..وب ذٔ ػ ١ٍّخ اظٙبس
ا ؼٌ بٕفش رغ ١ش ث غٕك ٚاؽذ ا ٠نب.. فمو اظٙبس ثؼذ ذِح ص ١ِٕخ ؼِ ١ خٕ
..ٚ ىٌ ٠ ىّ ٟٕٕ ثبلإمبفخ ا ٌٝ ر هٌ اعزخذا ثؼل ا خٌقبئـ .. زٌٍؾى ثؼ ١ٍّخ اظٙبس ا ؼٌ قّش..ا ظٔش اقٌ ١غخ ا ؼٌب خِ:
.show( effect [, options ] [, duration ] [, complete ] )
ا ٠نب ثب غٌٕجخ ٌٙز ا خٌقبئـ فٟٙ رؾج اي hide ...
لاؽع ا ضٌّبي:

32. 11 ) Highlight Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
32
ز٘ا اي effect ٠مٛ ػ ٍٝ اخفبء أٚ اظٙبس ا ؼٌ قٕش, ىٌ غِ رغ ١١ ش ٌٛ ا خٌ فٍ ١خ ٌٙزا
ا ؼٌ قٕش ...
ا قٌ ١غخ ا ؼٌب خِ :
selector.effect( "highlight",{color}, speed );
(
1Highlight : اع اي effect .
(
2Color : ٚ ٟ٘ ا ٌٍٛ ا زٌٞ ع ١ظٙش ػ ذٕ اخزفبء أٚ اظٙبس ا ؼٌ قٕش..
(
3Speed : ا ضٌ ا لٌاص فٌٕ ١ز ا ؾٌذس.
*( لِاؽظخ: color ١ٌغذ ٟ٘ ا خٌبف ١خ ا ٌٛؽ ١ذح ا زٌٟ ٠ ىّ روش ب٘ ..ث بٕ٘ن ضِلا
ا خٌبف ١خ mode ..ٚ ٟ٘ ثب ؾٌب خٌ الافزشام ١خ show ٠ؼ ٟٕ أف ا ؼٌ قٕش أ ٠ىٛ ..
ظب ش٘.. ىٌ ٟٕ ارطشق زٌوش ب٘ بٕ٘ ٚعبثمب ..لاػزجبس ب٘ أ شِ افزشامٟ ..ٚ ٠ ىّ هٕ
ا زٌؼذ ٠ ػ ٍٝ ر هٌ زِٝ ؽئذ ..
**( لِاؽظخ: ٠ ىّ هٕ اعزخذا ن hide, or show ... ا خٌ ٚ ز٘ ا قٌ ١غخ و ضّبي ؾٌشػ اي
effect ..

33. 12 ) Puff Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
33
ز٘ا ا ؾٌذس ٠غزخذ لإخفبء ٚئظٙبس ا ؼٌ بٕفش ػ هش ٠ك رىج ١ش ٚ فٔخ
ا ؼٌ قٕش ٚئخفبئ أٚئظٙبس ثزاد ا ٌٛلذ .. ؽشوخ طٌ ١فخ ^__^
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "puff",{percent}, speed );
(
1Puff : اع اي effect ..
(2 Percent : ٚ ٟ٘ مِذاس ا نٌّبػفخ ؾٌغ ا ؼٌ قٕش ػ ذٕ ا زٌىج ١ش ..ف ضّلا
200 أٞ ا نٌّبػفخ ا ٌٝ 2 ضِلا ..فٟ ا ؾٌب خٌ الافزشام ١خ ٠ىٛ ؽغ ا نٌّبػفخ ٛ٘ 150 ..
(
3 ؾٌٕب ذ٘ ضِبلا ؼِب ^_______________^:

34. 13 ) PulsateEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
34
ز٘ا اي effect ٠مٛ ػ ٍٝ اظٙبس أٚ اخفبء ا ؼٌ قٕش ػ ٍٝ ؽى ػ ١ٍّخ جٔل
زِزب ٌٟ ا ظٌٙٛس ٚالاخزفبء...
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "pulsate",{times}, speed );
٠مقذ بٕ٘ ثبي times ػذد شِاد ا جٌٕل ا زٌٟ ع ١ز ر فٕ ١ز ب٘ .. ثب ؾٌب خٌ
الافزشام ١خ ٟ٘ 5 جٔنبد ..
ؽب ذ٘ ا ضٌّبي:

35. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
35

36. 14 ) ScaleEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
36
٠مٛ ز٘ا اي effect ػ ٍٝ رم ١ٍـ أٚ ص ٠بدح ؽغ ا ؼٌ قٕش اػز بّدا ػ ٍٝ ا غٌٕجخ
ا ئٌّٛ ٠خ ..
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "scale",{arguments}, speed );
٠مقذ ثبي arguments .. بِ ٠ ٍٟ:
(1 direction : ٚ ٛ٘ الارغب ا خٌبؿ ثب ؾٌشوخ ..ا خٌ ١بساد ا زٌّبؽخ ٟ٘
both, vertical , horizontal (2 From : ٚ ٛ٘ ٠ ضّ ا ؾٌب خٌ ؼٌٍ قٕش ػ ذٕ ا جٌذا ٠خ , غب جٌب لا ؾٔزبط ز٘ ا ذٌا خٌ .لإ ٙٔب رؾزبط ا ٌٝ object ثبلامبفخ زٌؾذ ٠ذ اي width ٚاي
height ...
(3 Origin : ز٘ ر ضّ ا مٌٕطخ ا زٌٟ ع ١زلاؽٝ ػ ذٕ ب٘ ا ؼٌ قٕش, ٚ ٟ٘ ػجبسح
ػ قِفٛفخ..ٚفٟ ؽب زٌٙب الافزشام ١خ رىٛ [ "middle","center" ]

37. 14 ) ScaleEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
37
4 ) Percent : ٚ ٟ٘ ر ضّ ا غٌٕجخ ا ئٌّٛ ٠خ زٌٍمـٍ..ا مٌ ١ خّ 0 ا ٌٝ 100 فٟ
ا ؾٌب خٌ الافزشام ١خ ..
5 ( ٚا خٌبف ١خ الأخ ١شح ١٘ب : scale : ٚٚظ ١فزٙب رؾذ ٠ذ ا غٌضء أٚ ا غٌّبؽخ ا ؼٌ قٕش ٚا زٌٟ ع ١ز رم ١ٍقٙب أٚ ص ٠بدح ؽغ ّٙب ... ف ضّلا عزىٛ ػ ١ٍّخ اي resize ؼٌٍ قٕش ثزار غِ ا ؾٌّزٜٛ أ ؼٌٍ قٕش فمو أ ؾٌٍّزٜٛ فمو..
ا خٌ ١بساد ا زٌّبؽخ ٌٙز ا خٌبف ١خ ٟ٘ both, box, content
Box : ٚ ٟ٘ ػ ١ٍّخ اي resize ي border ٚاي padding ؼٌٍ قٕش ..
Content : ٚ ٟ٘ ػ ١ٍّخ اي resize لأٞ ؾِزٜٛ داخ ز٘ا ا ؼٌ قٕش ..
Both : ولا بّ٘ ؼِب ... ^_________^

38. 15 ) ShakeEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
38
ز٘ا اي effect ٠مٛ ػ ٍٝ ا ؾٔبء ؽشوخ ا ز٘ضاص ٠خ أٚ زِأسعؾخ أوضش شِح
ثؾى أفمٟ أٚ ػب ِٛدٞ ....
اقٌ ١غخ ا ؼٌب خِ:
selector.hide|show|toggle( "shake ", {arguments}, speed );
٠مقذ ثبي arguments .. بِ ٠ ٍٟ:
(
1direction : ٚ ٛ٘ الارغب ا خٌبؿ ثبلا ز٘ضاص ..ٚ ٠ ىّ أ ٠ىٛ up, down,right, left ٚثب ؾٌب خٌ الافزشام ١خ left(2 Distance : ٚ ٟ٘ ا غٌّبفخ ا زٌٟ عزىٛ و مٕطخ ٙٔب ٠خ لٌاسرذاد .. ٠ؼ ٟٕ
مِذاس ا غٌّبفخ لٌإ ز٘ضاص ..ا مٌ ١ خّ الافزشام ١خ 20
(
3Times : ػذد شِاد الا ز٘ضاص الافزشامٟ 3

39. 16 ) SizeEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
39
٠مٛ ز٘ا اي effect ػ ٍٝ ػ resize ؼٌٍ قٕش , ٠ز رؾذ ٠ذ ا طٌٛي ٚا ؼٌشك
ٌٙز ا ؼٌ ١ٍّخ, ثؾ ١ش ٠ز ٚمغ ا مٌ ١ّ ١ زب أص بٕء وزبثخ ا ؾٌ ١فشح ا جٌش غِ ١خ,
ٚأص بٕء ا زٌ فٕ ١ز ٠ز رغ ١١ ش الأثؼبد ا ؾٌم ١م ١خ ؼٌٍ قٕش ...
اقٌ ١غخ ا ؼٌب خِ:
selector.effect( "size",{arguments}, speed );
٠مقذ ثبي arguments .. بِ ٠ ٍٟ:
1 ) to : ٚ بٕ٘ ٠ز رؾذ ٠ذ ا طٌٛي ٚا ؼٌشك ا زٌٞ ع ١ق ا ١ٌٙ بّ ا ؼٌ قٕش..
2 ) scale : ر ؽشؽٙب عبثمب ... ٚخ ١بسارٙب box, content, both
3 ) origin : ر ؽشؽٙب عبثمب .. ب٘ٞ مٔطخ ا زٌؾزذ ٚ ٟ٘ ػجبسح ػ قِفٛفخ ... بٕ٘ ثب ؾٌب خٌ الافزشام ١خ ٟ٘
[ "top","left" ]

40. تفكر
خير الخلق سيدنا محمد صل الله عليه وسلم
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
40
عدد أ لٗاد اىسس ه٘ صو الله عي سٗي سبعت , ثلاثت ذم ز٘ , أٗزبع إ اّد –
إٗك اىب اٍ بأس اَئ م اَ يٌ :ً 1 – اىقاس اىري نٌ ىْ ب اىسس ه٘
صو الله عي سٗي ف قٍاه : أب اىقاس صو الله عي سٗي أٗ خد جٌت
ب جْ خ يٌ٘د اىقسش تٍ زض الله ع اْٖ . 2 – عبد الله , قٌٗاه ى : اىطا سٕ
اٗىط بٍ , أٗ مرىل خد جٌت زض الله ع اْٖ . 3 – إبسا أصغس
أ لٗاد صو الله عي سٗي , أٗ اٍز تٌ اىقبط تٍ زض الله ع اْٖ . مٗي اٍح ا٘ صغاز ا زض الله ع . اىب اْث : 4 – ش بٌْ زض الله ع اْٖ . 5
– زق تٍ زض الله ع اْٖ . 6 – أ ميث زض الله ع اْٖ . 7 – فاط تَ زض الله ع اْٖ : أحب إى صو الله عي سٗي , مٗي ب اْث خد جٌت
زض الله ع اْٖ , فج عٍَ أ لٗاد اىسس ه٘ صو الله عي سٗي خد جٌت
زض الله ع اْٖ إلا إبسا زض الله ع فإ اٍز تٌ اىقبط تٍ زض الله
ع اْٖ ىٗ سٍ ى بق تٍ ش جٗاح ذز تٌ صو الله عي سٗي .
اى سَجع: اسلا بٌٗ.

41. 17 ) SwitchClassEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
41
٠مٛ ز٘ا اي effect ػ ٍٝ د ظِ ػذح رأص ١شاد أٚ خقبئـ ؼِب, ضِ addClass أٚ removeClass أٚ اعزخذا اي easing .. ز٘ا اي effect
ٚظ ١فز ٟ٘ ؽزف class ,ً ؼِ ١ ..ٚامبفخ آخش.. ٚوأ ٙٔب ػ ١ٍّخ رجذ ٠
ثبلإمبفخ ا ٌٝ ر هٌ .. ٠ ىّ بٕٕ امبفخ اي effect ا زٌٞ شٔ ٠ذ و بّ رؼ بٍّٕ
ثبعزخذا اي easing ...
اقٌ ١غخ ا ؼٌب خِ ...
.switchClass( removeClassName, addClassName[,duration ] [, easing ] [, complete ] )
1 ) removeClassName : ٚ ٟ٘ أع بّء اي class أٚ اي classes ٠ؼ ٟٕ ع غّ (
أٚ فِشد( ٚا زٌٟ ع ١ز ؽزفٙب .. ارا ٚعذ أوضش class ع ١ز ؽزف ..فا ٠فق ث ١ و class ٚ class آخش غِبفخ ...

42. 17 ) SwitchClassEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
42
2 ) addClassName : ٚ ٛ٘ ا ىٌّب ا خٌّقـ لإمبفخ اي class أٚ اي
classes ع غّ أٚ فِشد.. ٚ ٠ز ا فٌق ث ١ اي classes ثبعزخذا ا غٌّبفخ
..
3 ) duration : ٚ ٛ٘ ا ٌٛلذ ا زٌٞ ع ١مٝ ث اي animation ل ١ذ ا زٌ فٕ ١ز ..هجؼب
و 1000 ٠ ضّ صب ١ٔخ ..ٚا ٌٛلذ الافزشامٟ ٛ٘ 400
4 ) easing : ٚلذ ر ؽشؽٙب عبثمب ^___^
5 ) complete : ر ؽشؽٙب عبثمب ..
ؽب ذ٘ ا ضٌّبي..

43. 18 ) toggleEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
43
ع ١ّؼ بٕ ٠ؼ ػ اي toggle .. ٚا ذٌٚس ا غٌ ١ّ ا زٌٞ رمٛ ث ,ٗ ,ٚ بٕ٘ ثب ىِب بٕٔ امنبفخ
نِب رؼ نٍّٕب نِ effect خِز فٍنخ ا نٌٝ ن٘ز اي toggle ..ٚثٙنزا رقنجؼ ن٘ز ا ذٌا نٌخ
ثب ىِب ٙٔنننب اخفنننبء أٚ اظٙنننبس ا ؾٌّزنننٜٛ نِننغ ٚعنننٛد اي effect ا نٌننزٞ شٔ ١١١١١٠ نننذ
^_____^
اقٌنننننننننننننننننننننننننننننننننننننننننننننننن ١غخ ا ؼٌب نِنننننننننننننننننننننننننننننننننننننننننننننننخ ن٘نننننننننننننننننننننننننننننننننننننننننننننننٟ :
.toggle(effect [, options ] [, duration ] [, complete ] )
٠مقذ ثنبي effect : أٞ دا نٌخ ٠ ىّن اعنزخذا ِٙب ؼٌ نّ ؽشونخ ؼِ ١ نٕخ .. ضِن اي fold, size ...ا خٌ ....
اي duration && complete .... ر ؽشؽٙ ^_^..
اي option : ٚر ضّ بٕ٘ الاػذاداد ا خٌبفخ ثنبي effect ا نٌزٞ ل نّذ ثبخز ١نبس أٚ اي
easing ...
ؽنننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننب ذ٘ ا ضٌّنننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننبي:

44. 19 ) toggleClassEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
44
و نّنب ل نّٕنب ثبعننزخذا اي toggle .. أ ٠نننب ٠ ىّ نٕٕنب اعننزخذا ا ذٌا نٌنخ toggleClass نِنغ ٚعننٛد اي
effecr ... هجؼب زٌٍٞ لا ٠ؼ نِب نٟ٘ اي toggleClass نٟ٘ ػجنبسح ن٘ دا نٌخ داخن اي
jQuery رغنننننزخذ ؾٌنننننزف ٚامنننننبفخ class أٚ classes ؼٌ قٕنننننش ؼِننننن ١ .. نِننننضلا ..
jQuery(“p”).toggleClass(“addClassOrRemove”); .. ا ٢ ن٘ننز عنننزمٛ ػ نٍننٝ
امننبفخ اي class ارا نِننؼ ِٛعنننٛد .. ٚارا ِٛعنننٛد عننن ١مٛ ثؾزفننن ..صٞ فىنننشح hide- show ...
ا ٢ ؼٔٛد شِح آخشٜ ا ٌٝ
اقٌ ١غخ ا ؼٌب خِ:
.toggleClass( className[,switch ] [, duration ] [, easing ] [, complete ] )

45. 19 ) toggleClassEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
45
اقٌ ١غخ ا ؼٌب خِ:
.toggleClass( className[,switch ] [, duration ] [, easing ] [, complete ] )
className : ٚ ٛ٘ اع اي class أٚ classes ا زٌٟ شٔ ٠ذ ؽزفٙب أٚ امنبفزٙب ) toggled ( ػ نٕذ
أٞ ؽننننذس.. ٚ ٠فقنننن ثنننن ١ ونننن class ٚا ٢خننننش فننننشاؽ .. ضِنننن cs1 cs2 ...ا نٌنننخ
switch : ٟ٘ ل ١ خّ طِٕم ١خ ..ا بِ true ٚئ بِ false ..ٚ ز٘ا لا ٠ؼ نٕٟ أ نٔ ٠غنت ٚمنغ true أٚ
false .. ٚ ىٌ ٠ ىّ هٕ أ ٠نب امبفخ ؽشه ؽغبثٟ ضِ count%3==0 ..ف بٕرظ ا ؾٌنشه
ز٘ا ا بِ ففش ٚا بِ ٚاؽذ .. ٚفبئذح ز٘ ا خٌبف ١خ ٛ٘ ٚمغ ؽنشه لامنبفخ اي class أٚ
ؾٌٍننننننننننننننننننننزف ارا وننننننننننننننننننننب ِٛعننننننننننننننننننننٛد ..خ ١ننننننننننننننننننننبس ع ١ّنننننننننننننننننننن ^_^...
ا ٢ ؾٌٕب ذ٘ ضِبي:

46. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
46
بِ ٠خجش ٟٔ ث أثٟ ػ ا ؾٌ ١بح..وش ٠ ا ؾٌبر ٌٟ

47. 19 ) TransferEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
47
ن٘نزا اي Effect ٠ ىّنن اعننزخذا نِنغ ا ذٌا نٌنخ .. effect() .. ٚ ن٘نٟ رمننٛ ػ نٍنٝ فنن غٕ فننٛسح
رفبػ ١ٍخ غٌٍّزخذ ػن هش ٠نك مٔن css ؼِن ١ أٚ class ؼِن ١ نِ ػ قٕنش ا نٌٝ ػ قٕنش
آخش.. ٚ ٟ٘ فِ ١ذح عذا زٌٛم ١ؼ ٚعنٛد ػلالنخ ثن ١ ػ قٕنش ٠ .. ٚلنذ ٠زغنبئ ا نٌجؼل,
ز٘ا فمو بِ ٠ ىّ ٟٕٕ فؼ نٍ ثٙنز ا خٌبفن ١خ ..ا غٌنٛاة هجؼنب لا .. ا نّٔب ٠ ىّ نٕه اعنزخذا ِٙب
غِ اي callback function قٌ غٕ رأص ١ش سائغ ..
ؾٌٕب ذ٘ اقٌ ١غخ ا ؼٌب خِ:
selector.effect( "transfer",{arguments}, speed, complete );
Transfer : اع اي effect ..
Arguments :ٓ : ٚرمغ ا ٌٝ عضئ ١
1 ) to : ٚ ٛ٘ ا ٌٝ أٞ ػ قٕش عزز ػ ١ٍّخ ا مٌٕ .. ٠ؼ ٟٕ ارا ٚمؼذ div2 فا ػ ١ٍّخ ا مٌٕ عزىٛ ا ٌٝ div2 ...

48. 19 ) TransferEffect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
48
2 ) className : ارا ثننذٞ ألننٛ ثؼ ١ٍّننخ ا مٌٕنن ن٘نز .ٖ.. ثمننذس أؽننذد class ؼِنن ١ ػؾننب ٠ىننٛ وزقنننننننننننننننن ١ّ ؼٌ ١ٍّننننننننننننننننخ ا مٌٕنننننننننننننننن .ً. ضِنننننننننننننننن اي background-color:red ..
لِاؽظخ ِٙ خّ: ارا رنغ className ٠غت ػ ١ٍه اعزخذا اي class
.ui-effects-transfer ز٘ا ٠ ضّ اي class الافزشامٟ ؼٌ ١ٍّخ ٌٙزا اي effect ..
ٚا ٢ ؾٌٕب ذ٘ ضِبلا:

49. 20 ) Animate Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
49
ٚا ٢ غِ ا ٌّٛمٛع الأخ ١ش فٟ ز٘ ا غٌ غٍ خٍ ..ٚلذ ٠ىٛ الأ نِ ث ١ ٕٙنب ن٘ٛ
اي animate Effect ...
ٚا غٌإاي ا ٢ نِبرا مٔقنذ ثنبي animate Effect ... اي animate نٟ٘ ػجنبسح
ػ دا نٌخ داخن اي jQuery رغنخذ زٌمنذ ٠ رنأص ١ش قِن ٕٛع ثؾنى ٠نذٚٞ –
ؽشوخ خِققخ- اػز بّدا أٚ ث بٕئب ػ ٍٝ خقبئـ اي css ..
هجؼنننب .. نٕ٘ننبن رمغننن ١ بّد لنننذ ٠م ّٙنننب ا نٌننجؼل ػ نٍننٝ اعنننبط animate color
..أٚغ ١ش ب٘ ... ىٌ ؾٔ ع زٕطشق ثار الله رؼب ٌٝ ا ٌٝ ف ١غخ ػب خِ رنن ّٙب
..ٚثب ىِب هٔ اعزخذا ِٙب غِ ا غٌ ١ّغ ...

50. 20 ) Animate Effect
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
50
اقٌ ١غخ ا ؼٌب خِ:
selector.animate( params, [duration,easing, callback] );
Params : ن٘نننٟ غِ ّٛػننننخ خقننننبئـ اي css ا زٌننننٟ ع غٕننننزخذ ِٙب قٌنننن غٕ اي
animate ا خٌبؿ ث بٕ ... ضِ ا ٌٍٛ ,ْ ا خٌ فٍ ١خ, ا ٌّٛلغ...
ا جٌبلٟ: ر ؽشؽ عبثمب ... ^_______^
ؽب ذ٘ ا ضٌّبي:

51. تفكر
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
51
اىعلا تٍ حافظ حن زح الله
ف اى ظَْ تٍ٘ اى تٍٍََ

52. الخاتمت
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
52
ا ؾٌ ذّ لله ا زٌٞ ثؾ ذّ رز ا ؼٌٕ ... ا ؾٌ ذّ لله سة ا ؼٌب ١ٌّ .ٓ.. ا ؾٌ ذّ لله فبؽت
ا فٌن .ً.. ا ؾٌ ذّ لله ػذد بِ وب .ْ. ٚػذد بِ ٠ىٛ .ْ.. ٚػذد ا ؾٌشوبد ٚا غٌىٛ .ْ..
ثٙزا ىٔٛ ا زٔٙ ١ بٕ اخٛرٟ .. ز٘ ا ذٌٚسح ا زٌّٛامؼخ فٟ jQuery Effect ..
...ُ عبئلا الله رؼب ٌٝ .. أ ٠زمج ز٘ا ا ؼٌ خبقٌب ٌٛعٙ ا ىٌش ٠
ا ٌٍٙ اغفش ٌٟ ٚ ٌٛا ذٌٞ ٚ غٌٍّ ١ٍّ ,ٓ أؽ ١بئٙ ٚأ ِٛارٙ .ُ.. ئ هٔ ػ ٍٝ و ؽٟء لذ ٠ش
...
ئخٛا ٟٔ .. أروشو أ ز٘ا ػ ثؾشٞ.. فا أفج بٕ ..فجفن الله رؼب ٌٝ
ٚسمٛا .. ٚئ أخطئ بٕ ف أ فٔغ بٕ ...

53. دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
53
ا مٌّذ :َ أ ١ٔظ ؽى ذّ أ ١ٔظ أثٛؽ ١ّذ
ا جٌش ٠ذ الا ىٌزشٚ ٟٔ: nees.com2aneeshikmat@, aneeshikmat@gmail.com
ا ٌّٛلغ الا ىٌزشٚ ٟٔ: nees.com2www.
دٚساد أخشٜ:
nees.com/ar/content/2
http:// دٚسح- jquery-nees.com/ar/content/json2
http:// دٚسح
nees.com/ar/content/2
http:// دٚسح- -5html ثب غٌٍخ-ا ؼٌشث ١خ
nees.com/ar/content/2
http:// دٚسح- زِمذ خِ-فٟ- غٌخ- phpnees.com/ar/content/2
http:// دٚسح-دسٚثبي- 7

54. النهايت
دٚسح غِب جٔخ جٔزغٟ ثٙب شِمبح الله رؼب ٌٝ.. غٔأي الله رؼب ٌٝ أ ٠زمج بِٕ ٚ ىِٕ خ ١ش ا ؼًٌّ
54
ٚآخش دػٛا بٔ أ ا ؾٌ ذّ لله سة ا ؼٌب ١ٌّٓ