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

23

جميلة جدا لكن كيف يمكن استخدام خاصية 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 فى بعض المتصفحات

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


تطوير الويب

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

91 ألف متابع