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

23

التعليقات

إضافة رائعة أستاذي وقررت أستخدمها في مشاريعي

هذه الخاصية موجودة في jQuery UI حسب ما أتذكر

التأثيرات effects الموجودة في jQuery UI

لاحظ أنها لا تقارن بمؤثرات animate.css فمؤثراته أغنى بكثير

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

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

قمت بعمل 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- الحركة تحدث عند الدخول و الخروج على العنصر .. لذا يجب أن تستخدم

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

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

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

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

أستخدمها فى موقعى notedn.com

بالمناسبة لفتت انتباهي في موقعك notedn.com ففتحت السورس كود وتعرفت على هذه الإضافة الرائعة فشكراً لك ^_^

جرب استعمال Velocity.js

-1

شكرا لك أخي الفاضل تم التحميل :)

-1

مشكور على الموقع D :

-2

اضافة رائعة جداً يا اخوان .. بالتوفيق :)


تطوير الويب

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

91.3 ألف متابع