0

下面是我的项目的示例屏幕截图...

http://i.imgur.com/D60mEG9.jpg

黄色球一直闪烁，直到你点击它，当它被点击时，黄色球变成蓝色并且一个盒子也弹出一个视频和一些图像......我需要在点击球时添加一个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");
            }
        }
4

2 回答 2

1

最好和最简单的 jquery 动画或效果是 jquery ui 在这里你会找到示例和 .js 文件

http://jqueryui.com/effect/

于 2013-08-18T18:32:24.823 回答
0

如果您想要动画而不仅仅是定位，请使用.animate()而不是.css()，如下所示：

function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) {

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

然后使用它，因为您似乎经常进行这种类型的更改，所以您使用选择器缓存将其称为 loke：

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();

你可以这样写：

var mainbox = $('#mainbox');或者var This = $(this);这样您就不必重新评估$('#mainbox')或$(this)每一行。事实上，在你的情况下，你应该使用链接并写这个（注意也.css()可以带一个对象）：

$('#mainbox').hide()
             .css({'top': '440px', 'left': '200px', 'z-index': '' })
             .show();
于 2013-08-18T16:11:25.573 回答