jQuery UI (Effect)

jQuery Effects: دسح

أ١ظ ؽىذ أثؽ١ذ: رمذ٠

: اجش٠ذ االىزش[email protected], [email protected]

[email protected]

2nees.com: الغ االىزش

بسم هللا الرحمن الرحيم

1 غأي هللا رؼب أ ٠زمج ب ى خ١ش اؼ.. دسح غبجخ جزغ ثب شمبح هللا رؼب

1 الفهرس

غأي هللا رؼب أ ٠زمج ب ى خ١ش اؼ.. دسح غبجخ جزغ ثب شمبح هللا رؼب

2

امذخ

زطجبد اذسح

addClass

removeClass

Blind

Bounce

Clip Effect

Drop effect

fadeTo

Explode

fold

2 الفهرس


3

Hide Effect

Show Effect

Highlight Effect

Puff Effect

EffectPulsate

Scale Effect

EffectShake

Size Effect

EffectSwitch Class

Toggle Effect

3 الفهرس


4

toggleClass

transfer Effect

Animate Effect

اخبرخ

المقدمت

5غأي هللا رؼب أ ٠زمج ب ى خ١ش اؼ.. دسح غبجخ جزغ ثب شمبح هللا رؼب

ثفن هللا , اؾذ هلل سة اؼب١, اؾذ هلل از ثؾذ رز اؼ, jQuery Effectرؼب سما ألذ ى ا١ أؽجز ئخر دسح

از Effectsز اذسح ازامؼخ عززى ثار هللا رؼب ػ ثؼل اي رفبػ ٠جش , ٠ى أ ن١فب زؼب ؼب زؼط ؽى عب سائغ

..ثذال اطشق ازم١ذ٠خ از ىضش اعزخذاب , اغزخذ

لذ , زبط ػ ثؾش, أ ز اذسح ازامؼخ, أروشو ئخرئ , فجفن هللا رؼب سما, فا أفجب, ٠ق١ت لذ ٠خطئ

, غأي هللا رؼب أ ٠زمج ب زا اؼ ازامغ... ف أفغب , أخطئبأ ٠شؽب ثشؽز ػف , ٠غفش ب اذ٠ب غ١غ اغ١

...غفشر

....ثغ هللا ػ ثشوخ هللا جذأ

متطلباث الدورة

غأي هللا رؼب أ ٠زمج .. دسح غبجخ جزغ ثب شمبح هللا رؼب

6ب ى خ١ش اؼ

ؼشفخ ثبيjQuery ..ز أ مطخ...

ف ز اذسح لب ثزؾ١ فبد ايjQuery ui, jQuery-1.10 .. عزغذبjsداخ ف اي

ؼشفخ ايcss

ؼشفخ ايhtml

: الؽظخ

زه ٠ضه ػ .. jQueryداخ اي Effectئ ز اذسح عززى ػ اي و١ف ٠ىب ازؼب .. jQueryؼشفخ و١ف ٠ىب اعزخذا اي ..أل رمذ٠ش

٠ىه ا٠غبد ره ا ؽبء هللا .. ثؾى خبؿ Eventاي Selectorغ اي : داخ اذسح ازب١خ

8%D1%B8%D88%9%AF%D8nees.com/ar/content/%D2http://jquery-9%A

http://2nees.com/ar/content/%D8%AF%D9%88%D8%B1%D8%A9-jquery


















تفكر


7ب ى خ١ش اؼ

ب ٠خجش ث أث ػ اؾ١بح ىش٠ اؾبر: وزبة

jQuery Effects


1 )addClass


9ب ى خ١ش اؼ

ى , أل ػقش ش٠ذ Css Classاز غزخذب إلمبفخ , ع١ؼب ٠ؼ ز اذاخ

ثذ عد ؽشوخ رؼط١ه غخ رفبػ١خ غ زا , وبذ االمبفخ ػ ثؾى رم١ذ

..ى ا٢ ٠ىب أ م ثزه , اؾذس

:اق١غخ اؼبخ از عزؼب ؼب

.addClass( className [, duration ] [, easing ] [, complete ] )

: ؽشػ ب ر روش

.. اعجبس..أال اع اىالط از شغت ثبمبفز : خقبئـ اخز١بس٠خ رؼ []اخقبئـ از رعذ داخ اي : صب١ب

٠ى أ رنغ داخ ز ,ؽز ٠ز effect الذ اغزغشق : duration( أ

ع١جم ف ؽ١ض ازف١ز 3000ارا ر مغ ام١خ , ضال , ام١خ ػ ؽى سل أ ـوم١خ ق١خ “ fast”أ ثاىبب مغ , ثزا فا و اف ٠ض صب١خ, صا 3غب٠خ

...زف١ز

1 )addClass


10ب ى خ١ش اؼ

ػجبسح ػ داخ رغزخذ زؾى ثغشػخ ع١ش اي : easing( ة

animation ؽغت اي , مطخ ا أخش jQuery core رمغ

.. Swing: اضب linerاالي , ا لغ١

.. ٠animtaionى عشػخ ازؾشن صبثز هاي ( Linerاي )ف األي

فزى عشػخ ازؾشن ثط١ئخ ػذ اجذا٠خ ( : Swingاي ) أب ف اضب

ى ..ز اؾبخ اضب١خ.. ػذ اب٠خ رخزف اغشػخ ف اعو

٠ىه ا٢ ..ب Customizeثؾ١ش ٠ىه ػ , بن خقبئـ أخش

easingغػخ أخش اي easeInOutQuintضال اعزخذا اي

animation .. الؽع اؾش٠ؾخ ازب١خ..-<

1 )addClass


11

Easing Animationؽبذ ب غػخ اي

--ازم ا اؾش٠ؾخ ازب١خ

1 )addClass


12ب ى خ١ش اؼ

ػ ازمبب ث١ Animationو ؾ ف اقسح اغبثمخ ٠ض عشػخ اي

فبػ ..ػذب رش اخو خبسط مطخ ؼ١خ .. ثبإلمبفخ ا ره , امبه

وزؾج١ ثغ١و اسرذاد وشح .. ع١خشط ٠ؼد وأ اسرذاد animationأ

... ^_^ ػ ؽجبن اش

٠ىه اظش ا ..ززنؼ افىشح أوضش

http://easings.net/ ... زا الغ ع١جغو ػ١ه ف امع..

ػ أ فسح hoverدلك ػ اإؽش األؽش از ع١ظش ػذ

..اظش ؽشوز ..

http://easings.net/

1 )addClass


13ب ى خ١ش اؼ

مذ رىب ػ ..ؼ١ذ رشر١ت األفىبس

.addClass( className [, duration ] [, easing ] [, complete ] )

ا٢ className, duration, easingرؾذصب ػ اخ١بساد اي

animationػذ االزبء اي ك خبف١خ رط: completeاي ( ط

effect ...

..زمػ افىشح ..ضال ..ا٢ ؾبذ ؼب

addClassEffects.html

تفكر


14

ذوزس قطف ؾد, االعال ب

2)removeClass


15ب ى خ١ش اؼ

٠ىب امبفخ .. ػذ ل١بب ثامبفخ والط. Effectا٢ وب لب ثامبفخ

Effect ػذ ؽزفclass ؼ١...

: اق١غخ اؼبخ

.removeClass( className [, duration ] [, easing ] [, complete ] )

زه .. addClassوب رالؽع ف رؾز فظ اخقبئـ اخ١بساد

..عىزف ثبعزؼشاك ضبي ػ ز اخبف١خ

removeClassEffect.html

3 )Blind Effect


16

ض عؾت , ػ ؽى عؾت Animation Effectرغزخذ ز اخبف١خ ؼ ض ألػ , ٠ى أ ٠ى زا اغؾت ػ ارغببد, وزؾج١..^_^اغزبئش ٠غزخذ زا اغؾت إلخفبء ؾز ؼ١ أ , ...١٠ أ ؽبي, أ إلعف

...إلظبس ؾز ؼ١

: اق١غخ االفزشام١خ

selector.hide|show|toggle( "blind", {arguments}, speed );

٠ى ا رؾز ... showأ hideأ Toggleداخ Blind فمو وزبثخ خ١بساد ض

up, down, left, right, vertical, horizontal ٠ى اعزخذاب ػ هش٠ك: الؽع اضبي ازب.. directionمغ اي

$(".target").hide( "blind", {direction: "horizontal"}, 1000 );

( up) ف اؾبخ االفزشام١خ ٠ى ع١ش االرغب : الؽظخ*(

3 )Blind Effect


زا اي , Effectى غ , إلخفبء اؼقش hideمذ ر اعزخذا اذاخ

Effect وب عBlind .. قد قج بخحدد احجا اىسس ىعيت

, فنا االحجا افق..باإلضافت اىى اىقج اىسخغسق ىرىل , اىسحب

اىقج اىسخغسق ثات احدة

: ؽبذ زا اضبي

BlindEffect.html

تفكر

غأي هللا رؼب .. دسح غبجخ جزغ ثب شمبح هللا رؼب

أ ٠زمج ب ى خ١ش اؼ

18

األعة األل األطف ف ازغ١١ش ب٠ف ػجذاشؽ

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

3 )Bounce Effect


20

ا اعزضبء عضء اإلثمبء ػ , اعزخذا ز اخقبئـ ؼب.. ٠ىه هجؼب ..Bounceب effectز اخ١بساد اخز١بس٠خ ثبعزضبء اع اي ..عضء

. أ سؤ٠ز, ؼ١ رش٠ذ effectزف١ز , ٠effectىه اعزخذا اذاخ : الؽظخ*(

زا ٠غبػذن , د اظبس أ اخفبء دائب effectزا ٠ؼ اىب١خ اؽذاس اي

...ػ ػ غبد ف١خ سائؼخ ػذ اؼ

فا ٠ز ص٠بدح قف ؽشوخ ػ اؼذد اعد .. timeثبغجخ : 2الؽظخ *(

ثبإلمبفخ ا ره ... زا ٠ؼط ظش عب سائغ,,,غب٠بد االخفبء أ االظبس ..فا ػذد شاد االسرذاد ٠غت أ ٠ى ػذد فؾ١ؼ

BounceEffect.html

4 )Clip Effect


21

٠م غ اخفبء أ اظبس اؼقش ػ هش٠ك ان effectزا اي , زا ف اؾبخ االفزشام١خ إلرغب.. األػ األعف ثبرغب ازقف

...ف١قجؼ ان ا١١ ا١غبس, ٠ى رغ١١ش ا أفم


selector.hide|show|toggle( "clip", {direction}, speed );

(1Clip : اع ايeffect

(2Direction :ارغب اؾشوخ

(3Speed :الذ اغزغشق الزبء اي, اغشػخ effect .

ClipEffect.html

5 )Drop Effect


22

٠م ػ اخفبء أ اظبس اؼبفش ػ هش٠ك اذظ ث١ اعث١ effectزا اي اخزفبء ا اظبس fadeع١ؼب ؼشف ػ ا اي .. fade slideب اي

ؽشوخ اظبس ا اخفبء اؼبفش slideاي ... اؼقش ثؾى رذس٠غ ...ػ ؽى اعذاي

افجؼ ثبىبب اعزخذاب ؼب ػ هش٠ك , ا٢ ر اذظ ث١ األعث١Drop effect ..


selector.hide|show|toggle( "drop", {direction}, speed );

..٠طجك ب ..ب ر روش عبثمب

,left, right: االرغببد top, bottom

dropEffect.html

تفكر


23ب ى خ١ش اؼ

أ اغننننؼبدح ف١ننننب رننننشن ننننب ف١ننننب*** اننننفظك رجىنننن ػنننن اننننذ١ب لننننذ ػننننذ

م لجنننن انننندد ثب١ننننب*** ال داس ننننشءد ثؼننننذ انننند ٠غىكنننن ب ئال ازنننن وننننب

ئ ثبننننننب ثؾننننننش خننننننبة ثب١ننننننب*** فنننننا ثبننننننب ثخ١ننننننش هننننننبة غىكننننن

دسنننننب خنننننشاة انننننذش ج١نننننب*** أانننننب نننننز ا١نننننشاس غؼكنننننب

ؽزننن عنننمبب ثىنننأط اننند عنننبل١ب*** أ٠ننن انننن ازننن وبنننذ غط ننن خ

فنن ا٢فننبق ل نن ذ ث١ننذ أغننذ خشاثننب أفنن انندك أ١ننب*** فىنن ننذائ

ئ اذ١ب ب ف١ ب فبد ال ؽه ٠كف١ب ٠كف١ب*** ال رشودم

ؽؼش االب ػ ث أث

هبت وش هللا ع

6 )fadeTo


24ب ى خ١ش اؼ

, از ٠جذا ع١ال غزخذ effectرؼط ع اي ..ثجغبهزب ...ز اخبف١خ ى غ اخزالف fadeIn, fadeOutوب ٠غزخذ اي ٠effectغزخذ زا اي

!! االخزفبء ازذس٠غ فال ا مطخ ؼ١خ.. ثغ١و

.. opacityػ١خ االخزفبء از رز ثؾى رذس٠غ رزوشب ثبي ..ثأعة آخش فا اؼقش ع١ى خزف ربب .. ففش opacityثزه ػذب ٠غب اي

از opacityعأل ثبخز١بس غجخ اي .. ى أب أدػ ٠ق ا اقفش....^_^عزجم اؼقش ؽ١ئب شئ١ب

:اق١غخ اؼبخ

selector.fadeTo(speed, opacity[, callback]);

ا اؾش٠ؾخ ازب١خ.....

6 )fadeTo


25ب ى خ١ش اؼ

effect عشػخ رف١ز اي : ٠speedمقذ ثبي

٠غت ا .. دسعخ اؾفبف١خ از ع١زلف ػذب اؾذس ٠opacityمقذ ثبي

٠غت ػ١ه ... ٠0.3ؼ ضال ... رى ام١خ ث١ اقفش ااؽذ

-اعجبس٠خ-..رؾذ٠ذ ام١خ

effectأ ػذب ٠ز اوزبي اي .. ب ٠callback functionمقذ دائب ثبي

..اهجغ رذ اؼ١خ ثغبػ ..وضبي ..برا رش٠ذ ا ٠ؾق... أ رف١ز

: اظش اضبي ازب

fadeTo.html

7 )Explode Effect


26ب ى خ١ش اؼ

اغب امع ..ه١ت ... ؟ array؟ ثزؼشف رزؼب غ اي phpثزؼشف

^_______^أل ب ا دخ ..

Explode زا ايeffect ػذ ..٠م ػ رمغ١ اؼقش ا لطغ

٠ز ثؼضشح أ رغ١غ .. إلظبس أ اخفبء اؼقش effectاعزخذا زا اي

... ^_^ؽذ٠ذ اشػخ effectثزا ٠ؼط ..امطغ


selector.hide|show|toggle( "explode", {pieces}, speed );

----ا اؾش٠ؾخ ازب١خ

7 )Explode Effect


27

Pieces ػذد امطغ از ع١مغ ا١ب اؼقش ػذ ازغ١غ ا اجؼضشح ..

.... 9ف اؾبخ االفزشام١خ ٠ى ػذد امطغ

اؼذد از ٠مغ ٠غت أ ٠ى ..٠ز رمغ١ امطغ ػ ؽى شثؼبد

ع١ز رمش٠ت .. ف وب ازمغ١ ؾى ٠ؾج اشثغ , ػذد فؾ١ؼ

...امطغ أللشة ؽذ ى ؽى اشثغ

^_____________^: ش ضبال

explodeEffect.html

8 )Fold Effect


ب ى خ١ش اؼ

28

... ز اؾذس ٠ؾج ػ١خ اط سق


selector.hide|show|toggle( "fold", {arguments}, speed );

Fold : اع ايeffect ..

Arguments :

1 )horizFirst :٠ىه مغ اؽزب١ , ٠جذأ اط ثؾى أفم؟true أfalse ,..falseهجؼب ثبؾبخ االفزشام١خ

2 )size :ئب ـ, ئب أ رى سل, رض ؽغ اط ؼقش ...

.. effectره زن ػ زا اي .. 30ضال ٠sizeفن مغ اي : الؽظخ*(

: ؽبذ اضبي

FoldEffect.html

تفكر


ال ئ ئال هللا اؼظ١ اؾ١ ,ال ئ ئال هللا سة اؼشػ اؼظن١ )

, الئنننن ئال هللا سة اغنننناد سة األسك سة اؼننننشػ

(اىش٠

أؽذ أ ؾذ ػجذن سعه... أؽذ أ ال ا اال هللا

9)Hide Effect


وبذ ػ١خ االخزفبء ..ى ... jQueryداخ اي hideع١ؼب اعزخذ اي ى ٠ى ..فمو اخزفبء ثؼذ ذح ص١خ ؼ١خ .. رغ١ش ثغك اؽذ

زؾى ثؼ١خ االخزفبء ..ثبإلمبفخ ا ره اعزخذا ثؼل اخقبئـ :اظش اق١غخ اؼبخ..

.hide( effect [, options ] [, duration ] [, complete ] )

أ رزوش ثؼذ ٠ى اعزخذاب ؼ .. أ داخ روشبب effectاي ...رأص١شاد ؼ١خ

Option : ٠ى مغ اخقبئـ اخبفخ ثبيeffect از ر مؼ..

..أب اجبل ف ؾبث غبثك

: اظش اضبي

hideEffect.html

10)Show Effect


وبذ ػ١خ اظبس ..ى ... jQueryداخ اي showع١ؼب اعزخذ اي

فمو اظبس ثؼذ ذح ص١خ ؼ١خ .. اؼبفش رغ١ش ثغك اؽذ ا٠نب

زؾى ..ى ٠ى ثبإلمبفخ ا ره اعزخذا ثؼل اخقبئـ ..

:اظش اق١غخ اؼبخ..ثؼ١خ اظبس اؼقش

.show( effect [, options ] [, duration ] [, complete ] )

... hideا٠نب ثبغجخ ز اخقبئـ ف رؾج اي

: الؽع اضبي

showEffect.html

11)Highlight Effect


32

ى غ رغ١١ش اخف١خ زا , ٠م ػ اخفبء أ اظبس اؼقش effectزا اي ... اؼقش


selector.effect( "highlight", {color}, speed );

(1Highlight : اع ايeffect.

(2Color :ا از ع١ظش ػذ اخزفبء أ اظبس اؼقش ..

(3Speed :اض االص ف١ز اؾذس.

ث بن ضال ..١غذ اخبف١خ اؽ١ذح از ٠ى روشب color: الؽظخ*( ٠ؼ أف اؼقش أ ٠ى .. show ثبؾبخ االفزشام١خ .. modeاخبف١خ

٠ىه ..الػزجبسب أش افزشام ..ى ارطشق زوشب ب عبثمب .. ظبش..ازؼذ٠ ػ ره ز ؽئذ

اخ ز اق١غخ وضبي ؾشػ اي ... ٠hide, or showىه اعزخذا ن : الؽظخ**( effect ..

highlightEffect.html

12)Puff Effect


33

زا اؾذس ٠غزخذ إلخفبء ئظبس اؼبفش ػ هش٠ك رىج١ش فخ

^__^ ؽشوخ ط١فخ .. اؼقش ئخفبئ أئظبس ثزاد الذ


selector.hide|show|toggle( "puff", {percent}, speed );

(1Puff : اع ايeffect ..

(2Percent : فضال .. مذاس انبػفخ ؾغ اؼقش ػذ ازىج١ش

ف اؾبخ االفزشام١خ ٠ى ؽغ ..ضال 2أ انبػفخ ا 200

.. 150انبػفخ

: ^_______________^ؾبذ ضبال ؼب 3)

puffEffect.html

13)Pulsate Effect


34

٠م ػ اظبس أ اخفبء اؼقش ػ ؽى ػ١خ جل effectزا اي

...ززب اظس االخزفبء


selector.hide|show|toggle( "pulsate", {times}, speed );

ثبؾبخ .. ػذد شاد اجل از ع١ز رف١زب ٠timesمقذ ب ثبي

..جنبد 5االفزشام١خ

: ؽبذ اضبي

pulsateEffect.html

تفكر


35ب ى خ١ش اؼ

14)Scale Effect


36

ػ رم١ـ أ ص٠بدح ؽغ اؼقش اػزبدا ػ اغجخ ٠effectم زا اي

..ائ٠خ


selector.hide|show|toggle( "scale", {arguments}, speed );

: ب ٠.. ٠argumentsمقذ ثبي

(1direction : اخ١بساد ازبؽخ .. االرغب اخبؿ ثبؾشوخ

both, vertical , horizontal

(2From : غبجب ال ؾزبط ز , ٠ض اؾبخ ؼقش ػذ اجذا٠خ

اي widthثبالمبفخ زؾذ٠ذ اي objectإلب رؾزبط ا .اذاخ

height ...

(3Origin :ػجبسح , ز رض امطخ از ع١زالؽ ػذب اؼقش

,"middle" ]ف ؽبزب االفزشام١خ رى ..ػ قففخ "center" ]

14)Scale Effect


37

4 )Percent :ف 100ا 0ام١خ .. رض اغجخ ائ٠خ زمـ

..اؾبخ االفزشام١خ

ظ١فزب رؾذ٠ذ اغضء أ اغبؽخ : scale: اخبف١خ األخ١شح ١ب ( 5

فضال عزى ... اؼقش از ع١ز رم١قب أ ص٠بدح ؽغب ؼقش ثزار غ اؾز أ ؼقش فمو أ resizeػ١خ اي

.. ؾز فمو both, box, contentاخ١بساد ازبؽخ ز اخبف١خ

Box : ػ١خ اي resize يborder ايpadding ؼقش..

Content : ػ١خ اي resize أل ؾز داخ زا اؼقش..

Both : والب ؼب ...^_________^

scaleEffect.html

15)Shake Effect


38

٠م ػ اؾبء ؽشوخ ازضاص٠خ أ زأسعؾخ أوضش شح effectزا اي

....ثؾى أفم أ ػبد


selector.hide|show|toggle( " shake ", {arguments}, speed );

: ب ٠ .. ٠argumentsمقذ ثبي

(1direction : ٠ى أ ٠ى .. االرغب اخبؿ ثبالزضاصup,

down, right, left ثبؾبخ االفزشام١خleft

(2Distance : ٠ؼ .. اغبفخ از عزى ومطخ ب٠خ السرذاد

20ام١خ االفزشام١خ ..مذاس اغبفخ إلزضاص

(3Times : 3ػذد شاد االزضاص االفزشام

Shake�Effect.html

16)Size Effect


39

٠ز رؾذ٠ذ اطي اؼشك , ؼقش resizeػ ػ ٠effectم زا اي , ثؾ١ش ٠ز مغ ام١١زب أصبء وزبثخ اؾ١فشح اجشغ١خ, ز اؼ١خ

...أصبء ازف١ز ٠ز رغ١١ش األثؼبد اؾم١م١خ ؼقش


selector.effect( "size", {arguments}, speed );

: ب ٠ .. ٠argumentsمقذ ثبي

1 )to :ب ٠ز رؾذ٠ذ اطي اؼشك از ع١ق ا١ب اؼقش..

2 )scale : خ١بسارب ... ر ؽشؽب عبثمبbox, content, both

3 )origin : ب مطخ ازؾزذ ػجبسح ػ .. ر ؽشؽب عبثمب

ب ثبؾبخ االفزشام١خ ... قففخ

[ "top", "left" ]

sizeEffect.html

تفكرخير الخلق سيدنا محمد صل هللا عليه وسلم

غأي هللا رؼب أ ٠زمج ب ى خ١ش اؼ.. دسح غبجخ جزغ ثب شمبح هللا رؼب40

–إاد أزبع , ذمز ثالثت , سبعت سي عي هللا صو اىسسه أالد عدد

اىسسه ب نى اىري اىقاس –1:ي ما بأسائ اىبا اك

خدجت أ سي عي هللا صو اىقاس أب : فقاه سي عي هللا صو

اىطاس : ى قاه , هللا عبد –2.عا هللا زض اىقسشت خيد بج

أصغس إبسا –3.عا هللا زض خدجت مرىل أ , اىطب

مي . عا هللا زض اىقبطت ازت أ , سي عي هللا صو أالد

5.عا هللا زض شب –4:اىباث . ع هللا زض صغازا احا

زض فاطت –7.عا هللا زض ميث أ –6.عا هللا زض زقت –

خدجت باث مي , سي عي هللا صو إى أحب : عا هللا

خدجت سي عي هللا صو اىسسه أالد فجع , عا هللا زض

هللا زض اىقبطت ازت فإ ع هللا زض إبسا إال عا هللا زض

. سي عي هللا صو ذزت شجاح بقت ى ىس عا

.ب اسال :اىسجع

17)SwitchClass Effect


41

ض , ػ دظ ػذح رأص١شاد أ خقبئـ ؼب ٠effectم زا اي

addClass أremoveClass أ اعزخذا ايeasing .. زا ايeffect

, وأب ػ١خ رجذ٠.. امبفخ آخش..ؼ١ classظ١فز ؽزف

از ش٠ذ وب رؼب ٠effectىب امبفخ اي ..ثبإلمبفخ ا ره

... easingثبعزخذا اي

... اق١غخ اؼبخ .switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

1 )removeClassName : أعبء اي class أ ايclasses ( ٠ؼ عغ

فا ..ع١ز ؽزف classارا عذ أوضش .. از ع١ز ؽزفب ( أ فشد

...آخش غبفخ ٠class classفق ث١ و

17)SwitchClass Effect


42

2 )addClassName : اىب اخقـ إلمبفخ اي class أ اي

classes ٠ز افق ث١ اي .. عغ أ فشدclasses ثبعزخذا اغبفخ

..

3 )duration : الذ از ع١م ث اي animation هجؼب ..ل١ذ ازف١ز

400الذ االفزشام ..٠ض صب١خ 1000و

4 )easing : لذ ر ؽشؽب عبثمب^___^

5 )complete : ر ؽشؽب عبثمب..

.. ؽبذ اضبي

switchClassEffect.html

18)toggle Effect


43

ب ثبىبب امنبفخ , ,اذس اغ١ از رم ث.. toggleع١ؼب ٠ؼ ػ اي ثنزا رقنجؼ نز اذانخ .. toggleخزفنخ ان نز اي effectنب رؼنب ن

انننز ش١١١١١٠نننذ effectثبىبنننب اخفنننبء أ اظنننبس اؾزننن نننغ عننند اي ^_____^

:اقنننننننننننننننننننننننننننننننننننننننننننننننن١غخ اؼبننننننننننننننننننننننننننننننننننننننننننننننننخ نننننننننننننننننننننننننننننننننننننننننننننننن .toggle( effect [, options ] [, duration ] [, complete ] )

,foldضن اي ..أ دانخ ٠ىن اعنزخذاب ؼن ؽشونخ ؼ١نخ : ٠effectمقذ ثنبي size ... اخ....

..^_^ر ؽشؽ .... duration && completeاي

انز لنذ ثبخز١نبس أ اي effectرض ب االػذاداد اخبفخ ثنبي : optionاي easing ...

: ؽنننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننبذ اضنننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننبي

toggleEffect.html

19)toggleClass Effect


44

ننغ عنند اي toggleClassأ٠نننب ٠ىننب اعننزخذا اذاننخ .. toggleوننب لننب ثبعننزخذا اي

effecr ... هجؼب ز ال ٠ؼ نب ن ايtoggleClass ن ػجنبسح ن دانخ داخن اي

jQuery رغنننننزخذ ؾنننننزف امنننننبفخclass أclasses نننننضال ..ؼقنننننش ؼننننن١..

jQuery(“p”).toggleClass(“addClassOrRemove”); .. ا٢ نننز عنننزم ػننن

-hideص فىنننشح ..ارا عننند عننن١م ثؾزفننن .. ارا نننؼ عننند classامننبفخ اي

show ...

ا٢ ؼد شح آخش ا


.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

19)toggleClass Effect


45


.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

className : اع اي class أclasses از ش٠ذ ؽزفب أ امنبفزب(toggled ) ػنذ

اننننخ... cs1 cs2ضنننن ..ا٢خننننش فننننشاؽ ٠classفقنننن ثنننن١ ونننن .. أ ؽننننذس

switch : اب .. ل١خ طم١خtrue ئبfalse .. زا ال ٠ؼن أن ٠غنت منغtrue أ

false .. ى ٠ىه أ٠نب امبفخ ؽشه ؽغبث ضcount%3==0 .. فبرظ اؾنشه

أ classفبئذح ز اخبف١خ مغ ؽنشه المنبفخ اي .. زا اب ففش اب اؽذ

...^_^خ١ننننننننننننننننننننبس ع١نننننننننننننننننننن ..ؾننننننننننننننننننننزف ارا وننننننننننننننننننننب عنننننننننننننننننننند

: ا٢ ؾبذ ضبي

toggleClass.html

تفكر


46

وش٠ اؾبر..ب ٠خجش ث أث ػ اؾ١بح

19)Transfer Effect


47

نن رمنن ػنن فننغ فننسح .. ()٠effectىنن اعننزخذا ننغ اذاننخ .. Effectننزا اي

ؼن١ ن ػقنش ان ػقنش classؼن١ أ cssرفبػ١خ غزخذ ػن هش٠نك من

, لنذ ٠زغنبئ انجؼل.. ف١ذح عذا زم١ؼ عند ػاللنخ ثن١ ػقنش٠ .. آخش

انب ٠ىنه اعنزخذاب .. اغناة هجؼنب ال ..زا فمو ب ٠ى فؼن ثنز اخبفن١خ ..قغ رأص١ش سائغ callback functionغ اي

: ؾبذ اق١غخ اؼبخ

selector.effect( "transfer", {arguments}, speed, complete );

Transfer : اع ايeffect..

Arguments :رمغ ا عضئ١:

1 )to : ٠ؼ ارا مؼذ .. ا أ ػقش عزز ػ١خ امdiv2 فا ػ١خ ام

...div2عزى ا

19)Transfer Effect


48

2 )className :ثمننذس أؽننذد ... ارا ثننذ ألنن ثؼ١ننخ امنن ننزclass ؼنن١ ػؾننب ٠ىنن

.. background-color:redضنننننننننننننننن اي .. وزقنننننننننننننننن١ ؼ١ننننننننننننننننخ امنننننننننننننننن

٠classغت ػ١ه اعزخذا اي classNameارا رنغ : الؽظخ خ

.ui-effects-transfer زا ٠ض ايclass االفزشام ؼ١خ زا ايeffect ..

: ا٢ ؾبذ ضبال

transferEffect.html

20 )Animate Effect


49ب ى خ١ش اؼ

لذ ٠ى األ ن ث١نب ن ..ا٢ غ امع األخ١ش ف ز اغغخ ...animate Effectاي

ن ػجنبسح animateاي ... animate Effectاغإاي ا٢ نبرا مقنذ ثنبي

–رغنخذ زمنذ٠ رنأص١ش قنع ثؾنى ٠نذ jQueryػ دانخ داخن اي

.. cssاػزبدا أ ثبئب ػ خقبئـ اي -ؽشوخ خققخ

animate colorنننبن رمغننن١بد لنننذ ٠منننب انننجؼل ػننن اعنننبط ..هجؼنننب

ى ؾ عزطشق ثار هللا رؼب ا ف١غخ ػبخ رننب ... أغ١شب ..

...ثبىبه اعزخذاب غ اغ١غ ..

20 )Animate Effect


50ب ى خ١ش اؼ


selector.animate( params, [duration, easing, callback] );

Params : نننن غػننننخ خقننننبئـ ايcss ازنننن عغننننزخذب قننننغ اي

animate الغ, اخف١خ, ض ا...اخبؿ ثب...

^_______^... ر ؽشؽ عبثمب : اجبل

: ؽبذ اضبي

animateEffect.html

تفكر


51ب ى خ١ش اؼ

اىعالت حافظ حن زح هللا

ف اىظت اىت

الخاتمت


52ب ى خ١ش اؼ

اؾذ هلل فبؽت ... اؾذ هلل سة اؼب١... اؾذ هلل از ثؾذ رز اؼ

...ػذد اؾشوبد اغى... ػذد ب ٠ى.. اؾذ هلل ػذد ب وب... افن

.. jQuery Effect ز اذسح ازامؼخ ف .. ثزا ى از١ب اخر

... أ ٠زمج زا اؼ خبقب ع اىش٠.. عبئال هللا رؼب

ئه ػ و ؽء لذ٠ش ... أؽ١بئ أار, ا اغفش اذ غ١

...

فجفن هللا رؼب ..فا أفجب .. أروشو أ زا ػ ثؾش.. ئخا

... ئ أخطئب ف أفغب .. سما


53ب ى خ١ش اؼ

أ١ظ ؽىذ أ١ظ أثؽ١ذ: امذ

nees.com2aneeshikmat@, [email protected]: اجش٠ذ االىزش

.nees.com2www: الغ االىزش

: دساد أخش

nees.com/ar/content/2http://دسح-jquery

-nees.com/ar/content/json2http://دسح

nees.com/ar/content/2http://5--دسحhtmlاؼشث١خ-ثبغخ

nees.com/ar/content/2http://غخ-ف-زمذخ-دسح-php

nees.com/ar/content/2http://7-دسثبي-دسح

mailto:[email protected]




http://www.2nees.com/



http://2nees.com/ar/content/��-jquery






http://2nees.com/ar/content/json-��





http://2nees.com/ar/content/��-html5-��-��











http://2nees.com/ar/content/��-��-��-��-php












http://2nees.com/ar/content/%D8%AF%D9%88%D8%B1%D8%A9-%D8%AF%D8%B1%D9%88%D8%A8%D8%A7%D9%84-7








النهايت


54ب ى خ١ش اؼ

آخش دػاب أ اؾذ هلل سة اؼب١

jQuery UI (Effect)

Education

Transcript of jQuery UI (Effect)