Adding javascript animation

Question

3.00/5 (1 vote)

See more:

http://imgur.com/D60mEG9[^]

How do i add an javascript animation to the css box in the above image i dnt have any clue how to add it help me out...
the CSS Part

CSS

body
{
    margin: 0;
    padding: 0;
}
#main
{
    width: 1920px;
    height: 1080px;
    background-image: URL('../assets/images/iwmi-bg.jpg');
}
.circle
{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    border: 5px solid #fdb219; /*box-shadow: 5px 5px #000;*/
    text-align: center;
    background-repeat:no-repeat;
    background-position:center; 
    z-index:10;}
    
@keyframes blink1 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 333.5px; top: 241.5px;  }
}

@-webkit-keyframes blink1 {
    0% {  width:60px; height:60px;left: 120px; top: 90px; }
    100% { width:65px; height:65px;left: 117.5px; top: 87.5px;  }
}

.blink1 {
    -webkit-animation: blink1 .75s linear infinite;
    -moz-animation: blink1 .75s linear infinite;
    -ms-animation: blink1 .75s linear infinite;
    -o-animation: blink1 .75s linear infinite;
    animation: blink1 .75s linear infinite;
} 

@keyframes blink2 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 332.5px; top: 240.5px;  }
}

@-webkit-keyframes blink2 {
    0% {  width:60px; height:60px;left: 665px; top: 360px; }
    100% { width:65px; height:65px;left: 662.5px; top: 357.5px;  }
}

.blink2 {
    -webkit-animation: blink2 .75s linear infinite;
    -moz-animation: blink2 .75s linear infinite;
    -ms-animation: blink2 .75s linear infinite;
    -o-animation: blink2 .75s linear infinite;
    animation: blink2 .75s linear infinite;
} 

@keyframes blink3 {  
   0% {  width:60px; height:60px;left: 721px; top: 206px; }
    100% { width:65px; height:65px;left:718.5px; top: 203.5px;  }
}

@-webkit-keyframes blink3 {
    0% {  width:60px; height:60px;left: 206px; top: 721px; }
    100% { width:65px; height:65px;left:203.5px; top: 718.5px;  }
}

.blink3 {
    -webkit-animation: blink3 .75s linear infinite;
    -moz-animation: blink3 .75s linear infinite;
    -ms-animation: blink3 .75s linear infinite;
    -o-animation: blink3 .75s linear infinite;
    animation: blink3 .75s linear infinite;
} 

@keyframes blink4 {  
    0% {  width:60px; height:60px; left: 570px; top: 800px; }
    100% { width:65px; height:65px; left: 567.5px; top: 767.5px;  }
}

@-webkit-keyframes blink4 {
    0% {  width:60px; height:60px;left: 661px; top: 500px; }
    100% { width:65px; height:65px;left: 658.5px; top: 497.5px;  }
}

.blink4 {
    -webkit-animation: blink4 .75s linear infinite;
    -moz-animation: blink4 .75s linear infinite;
    -ms-animation: blink4 .75s linear infinite;
    -o-animation: blink4 .75s linear infinite;
    animation: blink4 .75s linear infinite;
} 

@keyframes blink5 {  
    0% {  width:60px; height:60px; left: 1287px; top: 165px; }
    100% { width:65px; height:65px; left: 1284.5px; top: 162.5px;  }
}

@-webkit-keyframes blink5 {
    0% {  width:60px; height:60px;left:1291px; top: 154px; }
    100% { width:65px; height:65px;left: 1289.5px; top: 151.5px;  }
}

.blink5 {
    -webkit-animation: blink5 .75s linear infinite;
    -moz-animation: blink5 .75s linear infinite;
    -ms-animation: blink5 .75s linear infinite;
    -o-animation: blink5 .75s linear infinite;
    animation: blink5 .75s linear infinite;
} 

@keyframes blink6 {  
    0% {  width:60px; height:60px; left: 1450px; top: 308px; }
    100% { width:65px; height:65px; left: 1447.5px; top: 305.5px;  }
}

@-webkit-keyframes blink6 {
    0% {  width:60px; height:60px;left: 1488px; top: 309px; }
    100% { width:65px; height:65px;left: 1485.5px; top:306.5px;  }
}

.blink6 {
    -webkit-animation: blink6 .75s linear infinite;
    -moz-animation: blink6 .75s linear infinite;
    -ms-animation: blink6 .75s linear infinite;
    -o-animation: blink6 .75s linear infinite;
    animation: blink6 .75s linear infinite;
} 

@keyframes blink7 {  
    0% {  width:60px; height:60px; left: 1390px; top: 600px; }
    100% { width:65px; height:65px; left: 1387.5px; top: 575.5px;  }
}

@-webkit-keyframes blink7 {
    0% {  width:60px; height:60px;left: 1488px; top: 606px; }
    100% { width:65px; height:65px;left: 1485.5px; top:603.5px;  }
}

.blink7 {
    -webkit-animation: blink7 .75s linear infinite;
    -moz-animation: blink7 .75s linear infinite;
    -ms-animation: blink7 .75s linear infinite;
    -o-animation: blink7 .75s linear infinite;
    animation: blink7 .75s linear infinite;
} 

@keyframes blink8 {  
    0% {  width:60px; height:60px; left: 1720px; top: 820px; }
    100% { width:65px; height:65px; left: 1717.5px; top: 817.5px;  }
}

@-webkit-keyframes blink8 {
    0% {  width:60px; height:60px;left: 1635px; top:711px; }
    100% { width:65px; height:65px;left: 1632.5px; top: 708.5px;  }
}

.blink8 {
    -webkit-animation: blink8 .75s linear infinite;
    -moz-animation: blink8 .75s linear infinite;
    -ms-animation: blink8 .75s linear infinite;
    -o-animation: blink8 .75s linear infinite;
    animation: blink8 .75s linear infinite;
} 

#c1
{
      left:120px;
      top:90px;
}
#c2
{
  left:665px;
  top: 360px;  
}
#c3
{
  left: 206px;
  top: 721px;  
}
#c4
{
  left:661px;
  top: 500px;  
}
#c5
{
  left: 1291px;
  top: 154px;  
}
#c6
{
  left:1488px;
  top:309px;  
}
#c7
{
  left:1420px;
  top:608px;  
}
#c8
{
  left:1635px;
  top: 711px;  
}


/* Popup Box Css - Right side set*/

#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;
}


/* Popup Box Css - Left side set*/

#mainbox1 {
	background-color:#084679;
	height: 290px;
	width: 497px;
	position: absolute;
}
#videobox1 {
	background-color: #084679;
	height: 169px;
	width: 300px;
	left: 187px;
	top: 19px;
	float: left;
	position: absolute;
}
#smallbox11 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 15px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox21 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 136px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox31 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 257px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox41 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 378px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox51 {
	background-color: #084679;
	height: 62px;
	width: 110px;
	left: 22px;
	top: 55px;
	float: left;
	position: absolute;
}

The Java Script Part

JavaScript

$(document).ready(function () {

            $('#mainbox').hide();   // This is Right side  box 
            $('#mainbox1').hide(); // This is left side  box 

           $('#smallbox11').click(function () {

               // $('#videobox1').empty();
               // $('#videobox1').css('background-image', 'URL(assets/images/images1.jpg)');

           })

           $("#c1").click(function () {
               $("#mainbox").animate({
                   width: "70%",
                   opacity: 0.4,
                   marginLeft: "0.6in",
                   fontSize: "3em",
                   borderWidth: "10px"
               }, 1500);
           });

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

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


            $('#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)');

////                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();
                $('#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");
            }
        }

The HTML PArt

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <div id="main">
        <div id="c1" class="circle blink1">
        </div>
        <div id="c2" class="circle blink2">
        </div>
        <div id="c3" class="circle blink3">
        </div>
        <div id="c4" class="circle blink4">
        </div>
        <div id="c5" class="circle blink5">
        </div>
        <div id="c6" class="circle blink6">
        </div>
        <div id="c7" class="circle blink7">
        </div>
        <div id="c8" class="circle blink8">
        </div>
        <!--  Pop up box div tags-->
        <div id="mainbox">
            <div id="videobox">
                <video width="300" height="169" controls>
           <source src="assets/videos/MP4/Keeping%20the%20Water%20Flowing.mp4" type="video/mp4">
           <source src="movie.ogg" type="video/ogg">
          </video>
            </div>
            <div id="smallbox1">
                <img src="assets/images/01.jpg" width="110" height="62" />
            </div>
            <div id="smallbox2">
                <img src="assets/images/02.jpg" width="110" height="62" />
            </div>
            <div id="smallbox3">
                <img src="assets/images/03.jpg" width="110" height="62" />
            </div>
            <div id="smallbox4">
                <img src="assets/images/04.jpg" width="110" height="62" />
            </div>
            <div id="smallbox5">
                <img src="assets/images/box%20tesxt.png" />
            </div>
        </div>
        <!--  Pop up box div tags 2-->
        <div id="mainbox1">
            <div id="videobox1">
                <video width="300" height="169" controls>
            <source src="assets/videos/MP4/World%20Water%20Day.mp4" type="video/mp4">  <!-- video file -->
            </div>
            <div id="smallbox11">
                <img src="assets/images/01.jpg" width="110" height="62" />
            </div>
            <div id="smallbox21">
                <img src="assets/images/02.jpg" width="110" height="62" />
            </div>
            <div id="smallbox31">
                <img src="assets/images/03.jpg" width="110" height="62" />
            </div>
            <div id="smallbox41">
                <img src="assets/images/04.jpg" width="110" height="62" />
            </div>
            <div id="smallbox51">
                <img src="assets/images/box%20tesxt.png" />
            </div>
        </div>
    </div>
</body>
</html>

Posted 18-Aug-13 5:56am

Hawkeye101

Updated 18-Aug-13 18:50pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 18-Aug-13 12:21pm

"I don't have any clue" is not informative...
Besides, you did not describe exact effect you need.
—SA

ridoy 18-Aug-13 12:47pm

agree.

Sergey Alexandrovich Kryukov 18-Aug-13 13:01pm

Anyway, I answered...
—SA

Hawkeye101 18-Aug-13 14:46pm

Ill check on it and get back asap

Sergey Alexandrovich Kryukov 18-Aug-13 17:08pm

Great.
—SA

Hawkeye101 18-Aug-13 23:59pm

@Sergey I tried this!
$("#mainbox").click(function () {
$("#mainbox").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
But it doesnt animate!

Sergey Alexandrovich Kryukov 19-Aug-13 0:30am

Show also the relevant part of HTML and more of JavaScript. Do you really have id="mainbox"? Of what element? If the id unique?
Do you really execute the code you show? On what event? It it really triggered?

Can you use JavaScrip debugger?

—SA

Hawkeye101 19-Aug-13 0:35am

Yes i have a unique id for #mainbox...i aded this to the click event!

Sergey Alexandrovich Kryukov 19-Aug-13 0:41am

You need to check up everything, as the problem could be somewhere else, and I cannot do it, because you don't provide a self-contained complete code sample. But it should be simple. Is the handler actually triggered... and so on, see my other questions.
—SA

Hawkeye101 19-Aug-13 0:50am

I updated the Question Can u check on it and Help me out??

Sergey Alexandrovich Kryukov 19-Aug-13 1:40am

Not sure... at first glance, it looks correct, but you may have some bugs. I would reduce the code to some simplified sample, as simple as possible, to see if new features works in principle. Make it working. Make steps to reconcile this prototype with bigger page code... Use the debugger...
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-08-18T06:23:00

Solution 1

Please see my comment to the question. Not to worry: to get a clue, learn this:
http://api.jquery.com/animate/[^].

See also: http://api.jquery.com/category/effects/[^].

—SA

Posted 18-Aug-13 6:23am

Sergey Alexandrovich Kryukov