1. تطوير الويب
23

إضافة رائعة تضيف الحيوية لموقعك animate.css

  • حذف بواسطة المستخدم
  • زهير طه
  • 2014-09-30T01:48:14+00:00
  • رابط مختصر

التعليقات

عرض جميع التعليقات
1
oxgemy 2014-10-01T06:33:24+00:00 أضف ردا
  • رابط مختصر

جميلة جدا لكن كيف يمكن استخدام خاصية hover معها بدون استخدام ال jQuery حاولت لكن ماعرفت ممكن حد يقدملى شرح ليها ..؟؟

بمعنى انى لا اريد ان يعمل الأنيماشن على العنصر المراد مباشرة عند فتح الصفحة ..؟؟

2
زهير طه 2014-10-01T11:32:11+00:00 أضف ردا
  • رابط مختصر

قمت بعمل function أستخدمه في أعمالي وهو كالتالي: (يحتاج jQuery )

     function animate(el,x) {
        $(el).addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass(x + ' animated');
        });
  }

المتغير الأول el للعنصر الذي تريد تطبيق الحركة عليه والعنصر الثاني لمؤثر الحركة الذي تريد استخدامه مثال على الاستخدام: ليكن لدينا div يحمل id هو tahasoft عندئذ نكتب

    $("#tahasoft").hover(function(){
      animate( $(this),'flipInX');    
    });
1
زهير طه 2014-10-01T11:44:55+00:00 أضف ردا
  • رابط مختصر

رابط مثال للمعاينة:

http://jsfiddle.net/6rgw8tje/1
0
زهير طه 2014-10-01T11:53:44+00:00 أضف ردا
  • رابط مختصر

وهذا مثال آخر أكثر تنوعاً

http://jsfiddle.net/6rgw8tje/2
1
khashabawy 2014-10-01T23:33:30+00:00 أضف ردا
  • رابط مختصر

عزيزي لدى ملحوظاتان :

1- الحركة تحدث عند الدخول و الخروج على العنصر .. لذا يجب أن تستخدم

$( "td" ).hover(
    function() {
        // إضافة كلاس الحركة و حذف كلاس animate
    }, function() {
        // تترك فارغة لكى لا يحدث شئ أثناء سحب المؤشر خارجاً 
    }
);

أو استخدم mouseenter بدلا من Hover :

http://api.jquery.com/mouse...

2- لا تستخدم دوال يأسماء قياسية مثل remove أو animate .. لأنها من الممكن أن تتعارض مع الدوال المستخدمه فى jquery و jquery.ui فى بعض المتصفحات

0
زهير طه 2014-10-02T23:48:46+00:00 أضف ردا
  • رابط مختصر

أفدتني كثيراً جداً, فقد كنت أنزعج من تكرار الحركة عند الخروج وملاحظاتك في قمة الفائدة بالفعل أنت أكثر من رائع أستاذ عبد الله.

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

103 ألف متابع

أطلق موقعك الإلكتروني في دقائق

صمم موقعك كاملا بالسحب والإفلات بدون خبرة برمجية، واحجز مكانك على الإنترنت.

أنشئ موقعك الآن

انسخ هذا الرابط:

تنبيه