JavaScript动画

下面是我的项目的一个示例截图

黄色的球一直闪烁，直到你点击它，当它被点击时，黄色的球变成蓝色，一个框也弹出一个视频和一些图像。。。我需要添加一个javaScript动画当球被点击时，框应该滑入一个漂亮的动画。我试了很多次都没有成功

帮帮我，伙计们

这是盒子的CSS

#mainbox {
    background-color:#084679;
    height: 290px;
    width: 497px;
    position:absolute;
}
#videobox {
    background-color:#084679;
    height: 169px;
    width: 300px;
    left: 15px;
    top: 19px;
    float: left;
    position: absolute;
}
#smallbox1 {
    background-color: #0dd4d7;
    height: 62px;
    width: 110px;
    left: 15px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox2 {
    background-color: #0dd4d7;
    height: 62px;
    width: 110px;
    left: 136px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox3 {
    background-color:#0dd4d7;
    height: 62px;
    width: 110px;
    left: 257px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox4 {
    background-color:#0dd4d7;
    height: 62px;
    width: 110px;
    left: 378px;
    top: 211px;
    float: left;
    position: absolute;
}
#smallbox5 {
    background-color: #084679;
    height: 62px;
    width: 110px;
    left: 330px;
    top: 60px;
    float: left;
    position: absolute;
}

这是JavaScript

$('#c1').click(function () {
                setPos();

                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');
                clearCircle()


                $(this).removeClass("blink1");
                //$(this).addClass("blink1");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');

                $(this).css('top', 90 - ((190 - 60) / 2));
                $(this).css('left', 120 - ((190 - 60) / 2));

                $(this).css('background-image', 'URL(assets/images/blue_back.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '160px');
                $('#mainbox1').css('left', '165px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })

            $('#c2').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                $(this).removeClass("blink2");
                // $(this).addClass("blink2");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 360 - ((190 - 60) / 2));
                $(this).css('left', 665 - ((190 - 60) / 2));
                $(this).css('background-image', 'URL(assets/images/1.png)');
                $('#mainbox1').hide();
                $('#mainbox').hide();
                $('#mainbox').css('top', '440px');
                $('#mainbox').css('left', '200px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c3').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 721 - ((190 - 60) / 2));
                $(this).css('left', 206 - ((190 - 60) / 2));
                $(this).removeClass("blink3");
                // $(this).addClass("blink3");
                $(this).css('background-image', 'URL(assets/images/2.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '785px');
                $('#mainbox1').css('left', '265px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c4').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()

                $(this).css('z-index', '1');
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 500 - (
                (190 - 60) / 2));
                $(this).css('left', 661 - ((190 - 60) / 2));
                $(this).removeClass("blink4");
                //$(this).addClass("blink4");
                $(this).css('background-image', 'URL(assets/images/3.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '550px');
                $('#mainbox1').css('left', '738px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c5').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 154 - ((190 - 60) / 2));
                $(this).css('left', 1291 - ((190 - 60) / 2));
                $(this).removeClass("blink5");
                //$(this).addClass("blink5");
                $(this).css('background-image', 'URL(assets/images/5.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '223px');
                $('#mainbox').css('left', '820px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c6').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 309 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink6");
                // $(this).addClass("blink6");
                $(this).css('background-image', 'URL(assets/images/6.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '390px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c7').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color','#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 608 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink7");
                // $(this).addClass("blink7");
                $(this).css('background-image', 'URL(assets/images/7.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '680px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

            $('#c8').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 711 - ((190 - 60) / 2));
                $(this).css('left', 1635 - ((190 - 60) / 2));
                $(this).removeClass("blink8");
                // $(this).addClass("blink8");
                $(this).css('background-image', 'URL(assets/images/8.png)');

                $('#mainbox').show();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '785px');
                $('#mainbox').css('left', '1170px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

        })

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function ResetCircle() {
            $('.circle').css('width', '60px');
            $('.circle').css('height', '60px');
        }

        //<!--  Postion tags-->

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function setPos() {

            if ($('#c1').width() == 190) {
                $('#c1').css('top', 90);
                $('#c1').css('left', 120);
                $('#c1').addClass("blink1");
            }
            if ($('#c2').width() == 190) {
                $('#c2').css('top', 360);
                $('#c2').css('left', 665);
                $('#c2').addClass("blink2");
            }

            if ($('#c3').width() == 190) {
                $('#c3').css('top', 721);
                $('#c3').css('left', 206);
                $('#c3').addClass("blink3");
            }

            if ($('#c4').width() == 190) {
                $('#c4').css('top', 500);
                $('#c4').css('left', 661);
                $('#c4').addClass("blink4");
            }

            if ($('#c5').width() == 190) {
                $('#c5').css('top', 154);
                $('#c5').css('left', 1291);
                $('#c5').addClass("blink5");
            }

            if ($('#c6').width() == 190) {
                $('#c6').css('top', 309);
                $('#c6').css('left', 1488);
                $('#c6').addClass("blink6");

            }

            if ($('#c7').width() == 190) {
                $('#c7').css('top', 608);
                $('#c7').css('left', 1420);
                $('#c7').addClass("blink7");
            }

            if ($('#c8').width() == 190) {
                $('#c8').css('top', 711);
                $('#c8').css('left', 1635);
                $('#c8').addClass("blink8");
            }
        }

$（'#c1'）。单击（函数（）{
setPos（）；
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
$（this.removeClass（“blink1”）；
//$（此）.addClass（“blink1”）；
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
css（'top'，90-（（190-60）/2））；
css（'left'，120-（（190-60）/2））；
$（this.css（'background-image'，'URL（assets/images/blue_back.png）'）；
$（'#mainbox'）.hide（）；
$（'#mainbox1'）.hide（）；
$（'#mainbox1'）.css（'top'，'160px'）；
$（'#mainbox1'）.css（'left'，'165px'）；
$（'#mainbox1'）.css（'z-index'，''）；
$（'#mainbox1'）.show（）；
})
$（'#c2'）。单击（函数（）{
setPos（）
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
$（此）.removeClass（“blink2”）；
//$（此）.addClass（“blink2”）；
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
css（'top'，360-（（190-60）/2））；
css（'left'，665-（（190-60）/2））；
$（this.css（'background-image'，'URL（assets/images/1.png）'）；
$（'#mainbox1'）.hide（）；
$（'#mainbox'）.hide（）；
$（'#mainbox'）.css（'top'，'440px'）；
$（'#mainbox'）.css（'left'，'200px'）；
$（'#mainbox'）.css（'z-index'，''）；
$（'#mainbox'）.show（）；
})
$（'#c3'）。单击（函数（）{
setPos（）
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
css（'top'，721-（（190-60）/2））；
css（'left'，206-（（190-60）/2））；
$（此）.removeClass（“blink3”）；
//$（此）.addClass（“blink3”）；
$（this.css（'background-image'，'URL（assets/images/2.png）'）；
$（'#mainbox'）.hide（）；
$（'#mainbox1'）.hide（）；
$（'#mainbox1'）.css（'top'，'785px'）；
$（'#mainbox1'）.css（'left'，'265px'）；
$（'#mainbox1'）.css（'z-index'，''）；
$（'#mainbox1'）.show（）；
})
$（'#c4'）。单击（函数（）{
setPos（）
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
$（this.css（'z-index'，'1'）；
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
$（this.css（'top'，500-(
(190 - 60) / 2));
css（'left'，661-（（190-60）/2））；
$（this.removeClass（“blink4”）；
//$（此）.addClass（“blink4”）；
$（this.css（'background-image'，'URL（assets/images/3.png）'）；
$（'#mainbox'）.hide（）；
$（'#mainbox1'）.hide（）；
$（'#mainbox1'）.css（'top'，'550px'）；
$（'#mainbox1'）.css（'left'，'738px'）；
$（'#mainbox1'）.css（'z-index'，''）；
$（'#mainbox1'）.show（）；
})
$（'#c5'）。单击（函数（）{
setPos（）
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
css（'top'，154-（（190-60）/2））；
css（'left'，1291-（（190-60）/2））；
$（此）.removeClass（“blink5”）；
//$（此）.addClass（“blink5”）；
$（this.css（'background-image'，'URL（assets/images/5.png）'）；
$（'#mainbox'）.hide（）；
$（'#mainbox1'）.hide（）；
$（'#mainbox'）.css（'top'，'223px'）；
$（'#mainbox'）.css（'left'，'820px'）；
$（'#mainbox'）.css（'z-index'，''）；
$（'#mainbox'）.show（）；
})
$（'#c6'）。单击（函数（）{
setPos（）
$（'.circle'）.css（'width'，'60px'）；
$（'.circle'）.css（'height'，'60px'）；
clearCircle（）
//$（this.css（'background-color'，'#005aa8'）；
$（this.css（'width'，'190px'）；
$（this.css（'height'，'190px'）；
css（'top'，309-（（190-60）/2））；
css（'left'，1488-（（190-60）/2））；
$（this.removeClass（“blink6”）；
//$（此）.addClass（“blink6”）；
$（this.css（'background-image'，'URL（assets/images/6.png）'）；
$（'#mainbox'）.hide（）；
$（'#mainbox1'）.hide（）；
$（'#mainbox'）.css（'top'，'390px'）；
function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) {

    TheSelector.animate({ top: SomeTopValue,
                          left: SomeLeftValue
                          width: SomeWidthValue,
                          height: SomeHeightValue}, 500);
}

TheSelector = $(this); //or TheSelector = $('#mainbox1'); or another element
TheTop = 721 - ((190 - 60) / 2);
TheLeft = 206 - ((190 - 60) / 2);
TheHeight = 190;
TheWidth = 190;

AnimatePosition(TheSelector, TheTop, TheLeft, TheWidth, TheHeight);

$('#mainbox').hide();
$('#mainbox').css('top', '440px');
$('#mainbox').css('left', '200px');
$('#mainbox').css('z-index', '');
$('#mainbox').show();

$('#mainbox').hide()
             .css({'top': '440px', 'left': '200px', 'z-index': '' })
             .show();