الرسوم المتحركة المخصصة

$(selector).animate({
    property: value,
    property2: value2
}, duration, easing, callback);

<div id="box" style="width: 100px; height: 100px; background: blue;"></div>
<button id="animateBtn">تحريك</button>

<script>
$(document).ready(function() {
    $("#animateBtn").click(function() {
        $("#box").animate({
            width: "300px",
            height: "300px",
            opacity: 0.5
        }, 1000);
    });
});
</script>

// الموضع
left, right, top, bottom

// الأبعاد
width, height, padding, margin

// المظهر
opacity, fontSize, lineHeight

// الحدود
borderWidth, borderRadius

// أمثلة
$("#box").animate({
    left: "250px",
    opacity: 0.8,
    fontSize: "20px",
    borderRadius: "50%"
}, 1000);

// التحرك لليمين بمقدار 50 بكسل من الموضع الحالي
$("#box").animate({
    left: "+=50px"
}, 500);

// تقليل العرض بمقدار 20 بكسل
$("#box").animate({
    width: "-=20px"
}, 500);

// رسوم متحركة نسبية متعددة
$("#box").animate({
    left: "+=100px",
    top: "-=50px",
    width: "+=50px"
}, 1000);

// تسهيل خطي (سرعة ثابتة)
$("#box").animate({
    left: "300px"
}, 1000, "linear");

// تسهيل متأرجح (يبدأ بطيئًا، يسرع، ثم يبطئ)
$("#box").animate({
    left: "300px"
}, 1000, "swing");

// مع دالة استدعاء
$("#box").animate({
    left: "300px"
}, 1000, "swing", function() {
    alert("اكتملت الرسوم المتحركة!");
});

$("#box")
    .animate({ left: "250px" }, 1000)
    .animate({ top: "250px" }, 1000)
    .animate({ left: "0px" }, 1000)
    .animate({ top: "0px" }, 1000);

// مع خصائص مختلفة بالتسلسل
$("#box")
    .animate({ width: "300px" }, 500)
    .animate({ height: "300px" }, 500)
    .animate({ opacity: 0.3 }, 500)
    .animate({ opacity: 1 }, 500);

// جميع الخصائص تتحرك معًا
$("#box").animate({
    width: "300px",
    height: "300px",
    left: "200px",
    top: "200px",
    opacity: 0.5,
    fontSize: "24px"
}, 2000);

// يتحرك left في قائمة الانتظار، opacity يتحرك بشكل مستقل
$("#box")
    .animate({ left: "250px" }, 2000)
    .animate({ opacity: 0.5 }, { duration: 1000, queue: false });

// إيقاف الرسوم المتحركة الحالية
$("#box").stop();

// إيقاف ومسح قائمة الانتظار
$("#box").stop(true);

// إيقاف ومسح قائمة الانتظار والقفز إلى النهاية
$("#box").stop(true, true);

<style>
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-item {
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    overflow: hidden;
}
.nav-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary);
    transform: translateX(-50%);
}
</style>

<ul class="nav-menu">
    <li class="nav-item">
        الرئيسية
        <div class="nav-underline"></div>
    </li>
    <li class="nav-item">
        من نحن
        <div class="nav-underline"></div>
    </li>
    <li class="nav-item">
        الخدمات
        <div class="nav-underline"></div>
    </li>
</ul>

<script>
$(document).ready(function() {
    $(".nav-item").hover(
        function() {
            $(this).find(".nav-underline")
                .stop()
                .animate({ width: "100%" }, 300);
        },
        function() {
            $(this).find(".nav-underline")
                .stop()
                .animate({ width: "0" }, 300);
        }
    );
});
</script>

<style>
.progress-container {
    width: 100%;
    height: 30px;
    background: var(--bg-light);
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
}
.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 15px;
    position: relative;
}
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
    color: white;
    font-weight: bold;
}
</style>

<div class="progress-container">
    <div class="progress-bar">
        <span class="progress-text">0%</span>
    </div>
</div>
<button id="startProgress">بدء الرفع</button>

<script>
$(document).ready(function() {
    $("#startProgress").click(function() {
        var progressBar = $(".progress-bar");
        var progressText = $(".progress-text");

        progressBar.animate({ width: "100%" }, {
            duration: 3000,
            easing: "linear",
            step: function(now) {
                var percentage = Math.floor(now);
                progressText.text(percentage + "%");
            },
            complete: function() {
                progressText.text("اكتمل!");
            }
        });
    });
});
</script>

<style>
.stat-box {
    display: inline-block;
    padding: 30px;
    margin: 20px;
    background: var(--bg-light);
    border-radius: 10px;
    text-align: center;
    min-width: 200px;
}
.stat-number {
    font-size: 48px;
    font-weight: bold;
    color: var(--primary);
}
.stat-label {
    font-size: 16px;
    color: var(--text-light);
    margin-top: 10px;
}
</style>

<div class="stat-box">
    <div class="stat-number" data-target="1250">0</div>
    <div class="stat-label">عملاء سعداء</div>
</div>

<div class="stat-box">
    <div class="stat-number" data-target="5680">0</div>
    <div class="stat-label">مشاريع مكتملة</div>
</div>

<script>
$(document).ready(function() {
    function animateCounter(element) {
        var target = parseInt(element.attr("data-target"));

        $({ counter: 0 }).animate({ counter: target }, {
            duration: 2000,
            easing: "swing",
            step: function() {
                element.text(Math.floor(this.counter));
            },
            complete: function() {
                element.text(target.toLocaleString());
            }
        });
    }

    // تشغيل الرسوم المتحركة عندما يكون العنصر في منطقة العرض
    $(".stat-number").each(function() {
        animateCounter($(this));
    });
});
</script>

<style>
#ball {
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50px;
}
</style>

<div id="ball"></div>
<button id="bounceBtn">ارتداد الكرة</button>

<script>
$(document).ready(function() {
    $("#bounceBtn").click(function() {
        $("#ball")
            .animate({ top: "300px" }, 500, "linear")
            .animate({ top: "100px" }, 400, "linear")
            .animate({ top: "300px" }, 300, "linear")
            .animate({ top: "200px" }, 200, "linear")
            .animate({ top: "300px" }, 100, "linear")
            .animate({ top: "280px" }, 50, "linear");
    });
});
</script>

<style>
.parallax-container {
    height: 500px;
    overflow: hidden;
    position: relative;
}
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}
#layer1 { background: url("layer1.png") center/cover; }
#layer2 { background: url("layer2.png") center/cover; }
#layer3 { background: url("layer3.png") center/cover; }
</style>

<div class="parallax-container">
    <div class="parallax-layer" id="layer1"></div>
    <div class="parallax-layer" id="layer2"></div>
    <div class="parallax-layer" id="layer3"></div>
</div>

<script>
$(document).ready(function() {
    $(window).scroll(function() {
        var scrolled = $(window).scrollTop();

        // طبقات مختلفة تتحرك بسرعات مختلفة
        $("#layer1").css("top", -(scrolled * 0.2) + "px");
        $("#layer2").css("top", -(scrolled * 0.5) + "px");
        $("#layer3").css("top", -(scrolled * 0.8) + "px");
    });
});
</script>

<style>
.flip-card {
    width: 300px;
    height: 200px;
    position: relative;
    cursor: pointer;
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}
.flip-card-front {
    background: var(--primary);
    color: white;
}
.flip-card-back {
    background: var(--primary-light);
    color: white;
    display: none;
}
</style>

<div class="flip-card">
    <div class="flip-card-front">الأمام</div>
    <div class="flip-card-back">الخلف</div>
</div>

<script>
$(document).ready(function() {
    var isFlipped = false;

    $(".flip-card").click(function() {
        var front = $(this).find(".flip-card-front");
        var back = $(this).find(".flip-card-back");

        if (!isFlipped) {
            front.animate({ width: "0", opacity: 0 }, 200, function() {
                front.hide();
                back.css({ width: "0", opacity: 0 }).show()
                    .animate({ width: "100%", opacity: 1 }, 200);
            });
            isFlipped = true;
        } else {
            back.animate({ width: "0", opacity: 0 }, 200, function() {
                back.hide();
                front.css({ width: "0", opacity: 0 }).show()
                    .animate({ width: "100%", opacity: 1 }, 200);
            });
            isFlipped = false;
        }
    });
});
</script>

// التأخير قبل الرسوم المتحركة التالية
$("#box")
    .animate({ left: "250px" }, 1000)
    .delay(2000) // انتظر ثانيتين
    .animate({ top: "250px" }, 1000);

// تأخيرات متعددة
$("#box")
    .fadeOut(500)
    .delay(1000)
    .fadeIn(500)
    .delay(1000)
    .fadeOut(500);

// مسح جميع الرسوم المتحركة في قائمة الانتظار
$("#box").clearQueue();

// مسح قائمة انتظار محددة
$("#box").clearQueue("fx");

// إنهاء جميع الرسوم المتحركة فورًا
$("#box").finish();

// مثال: التمرير مع إدارة قائمة الانتظار
$("#box").hover(
    function() {
        $(this).stop(true, false).animate({
            width: "200px"
        }, 300);
    },
    function() {
        $(this).stop(true, false).animate({
            width: "100px"
        }, 300);
    }
);