Mais conteúdo relacionado Semelhante a jQuery UI (Effect) (20) Mais de anees abu-hmaid (20) jQuery UI (Effect) 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
ٚآخش دػٛا بٔ أ ا ؾٌ ذّ لله سة ا ؼٌب ١ٌّٓ