I'm trying to make 3DIVs to move with JS and place them on the right side of the page, I've done the animate script, however the position isn't right. On mobile phones it goes above my other divs in #header section and it's to much to the left. And on PC:s it is to far from the left.
Is there any way to keep my animation this way but to make it inside of the wrapper? So that It doesn't change it's position on mobile phones and PC:s?
HTML:
<div class="wrapper">
<div id="intro-right">
<div id="clouds-1"></div>
<div id="clouds-2"></div>
<div id="clouds-3"></div>
</div>
</div>
CSS:
div.wrapper {
margin: 0 auto;
padding: 0 20px;
min-width: 1024px;
width: 1024px;
}
div#intro-right {
float: right;
}
div#clouds-1 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 100px;
right: 150px;
background: url("img/clouds_bg_1.png") no-repeat;
opacity: 0;
}
div#clouds-2 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 110px;
right: 150px;
background: url("img/clouds_bg_2.png") no-repeat;
opacity: 0;
}
div#clouds-3 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 130px;
right: 150px;
background: url("img/clouds_bg_3.png") no-repeat;
opacity: 0;
}
JS:
$(document).ready(function() {
$("div#clouds-1").animate({
opacity:'0.4'
}, 1450);
$("div#clouds-2").animate({
opacity:'0.6'
}, 1450);
$("div#clouds-3").animate({
opacity:'0.8'
}, 1450);
});
$(document).ready(function() {
function moveRight1() {
$("div#clouds-1").animate({
top:'-=24px',
right: '+=50px',
opacity: '0.9'
}, 8000, moveLeft1);
}
function moveLeft1() {
$("div#clouds-1").animate({
top:'+=24px',
right: '-=50px',
opacity: '0.4'
}, 8000, moveRight1);
}
moveRight1();
function moveRight2() {
$("div#clouds-2").animate({
top:'-=24px',
right:'-=50px',
opacity: '0.9'
}, 8000, moveLeft2);
}
function moveLeft2() {
$("div#clouds-2").animate({
top:'+=24px',
right:'+=50px',
opacity: '0.6'
}, 8000, moveRight2);
}
moveRight2();
function moveRight3() {
$("div#clouds-3").animate({
top:'+=24px',
right:'+=100px',
opacity: '0.4'
}, 8000, moveLeft3);
}
function moveLeft3() {
$("div#clouds-3").animate({
top:'-=24px',
right:'-=100px',
opacity: '0.8'
}, 8000, moveRight3);
}
moveRight3();
});
Like pixelcdv said, CSS3 animations would be perfect for simple movement like this.
Here's a quick animation I came up using your code (all in percent)
The CSS for it based off of your html:
div#clouds-1 {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudOne 16s infinite;
-moz-transition: cloudOne 16s infinite;
-o-transition: cloudOne 16s infinite;
transition: cloudOne 16s infinite;
animation: cloudOne 16s infinite;
}
#keyframes cloudOne {
0% {
top:15%;
left: 35%;
}
50% {
top:7%;
left: 20%;
}
100% {
top:15%;
left: 35%;
}
}
div#clouds-2 {
position: absolute;
width: 30%;
height: 20%;
top:20%;
left: 45%;
background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudTwo 16s infinite;
-moz-transition: cloudTwo 16s infinite;
-o-transition: cloudTwo 16s infinite;
transition: cloudTwo 16s infinite;
animation: cloudTwo 16s infinite;
}
#keyframes cloudTwo {
0% {
top:20%;
left: 45%;
}
50% {
top:35%;
left: 15%;
}
100% {
top:20%;
left: 45%;
}
}
div#clouds-3 {
position: absolute;
width: 30%;
height: 20%;
top:30%;
left: 50%;
background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudThree 16s infinite;
-moz-transition: cloudThree 16s infinite;
-o-transition: cloudThree 16s infinite;
transition: cloudThree 16s infinite;
animation: cloudThree 16s infinite;
}
#keyframes cloudThree {
0% {
top:30%;
left: 50%;
}
50% {
top:5%;
left: 65%;
}
100% {
top:30%;
left: 50%;
}
}
I think in your case it would be better to use CSS3 animations. This way, you just have to call $('div#clouds-1').addClass(<new class that sets the position on the right>) instead of .animate() and adapt the css to work both on mobile and on desktop
Related
I want to basically create a loading spinner for when my page is loading in javascript. Sometimes, the page takes long to load based on connection and I would just like to show a loading spinner while it loads.
I'm not sure where to start, I will show my main HTML/EJS code to show where I would need it. Thanks in advance for the help!
$(window).load(function() {
$('#loading').hide();
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color : #0e086b;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
you can handle it manually. whenever you want to show a spinner you can call
$('#loading').show();
and to hide it after the ajax call use this in the callback function
$('#loading').hide();
The following solution will hide the spinner after 3 seconds, when the page loaded
$(document).ready(function() {
setTimeout(function(){ $('#loading').hide(); }, 3000);
});
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
simply remove the anim !
on the real DOMContentLoaded event
window.addEventListener('DOMContentLoaded', (event) =>
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
);
sample code :
(simply click on snippet to stop the animation)
document.body.onclick = () => // simulate DOMContentLoaded event
{
let LoadAnim = document.getElementById('loading')
document.body.remove(LoadAnim)
}
#loading {
display : block;
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : #040030e7;
z-index : 99;
}
#loading > div {
position : absolute;
top : calc(50% - 32px);
left : calc(50% - 32px);
width : 64px;
height : 64px;
border-radius : 50%;
perspective : 800px;
}
#loading > div > div {
position : absolute;
box-sizing : border-box;
width : 100%;
height : 100%;
border-radius : 50%;
left : 0%;
top : 0%;
border-bottom : 3px solid #f5f125;
}
#loading > div > div:nth-of-type(1) { animation : rotate-1 1s linear infinite; }
#loading > div > div:nth-of-type(2) { animation : rotate-2 1s linear infinite .3s; }
#loading > div > div:nth-of-type(3) { animation : rotate-3 1s linear infinite .6s; }
#keyframes rotate-1 {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
#keyframes rotate-2 {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
#keyframes rotate-3 {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
<div id="loading"> <!-- loading annimation-->
<div> <div></div> <div></div> <div></div> </div>
</div>
I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.
But I want to control animation time using jQuery.
My code:
.face {
position: absolute;
top: 10%;
left: 69%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<div class="face">
<div class="hand"></div>
</div>
As u can see at this line:
animation: hourHand 3s linear infinite;
I have time animation 3s, but this values i wanna control by jQuery code.
For example, this 3s i want to change to 14s, or 5s, or 22s.
To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.removeClass('slow').addClass('fast');
});
$('#slower').click(function() {
$hand.removeClass('fast').addClass('slow');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I want to define the time. For example now I have 3s, but from JS script I want to change this value
In this case you can use css() to set the value in JS directly:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.css('animation-duration', '1s');
});
$('#slower').click(function() {
$hand.css('animation-duration', '5s');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I am trying to create a loader component in my application for that I have used the following code.
CSS
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#maincontainer:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#maincontainer:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML
<div id="app">
<div id="maincontainer">
I have some contents here
</div>
</div>
Loader is working fine but the issue is the content inside the inner div also rotating with the loader. I want the contents to be stable in the page and only rotate the loader.
Jsfiddle link
Can some one please help me to resolve this.
The easiest solution by far is going to be to simply put the animation on a different element than the contents you don't want animated.
(Incidentally: it's no longer necessary to include those vendor-specific -webkit and -ms prefixed CSS elements; animation and transform have been broadly supported for years now.)
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#spin, #maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
/* Combining the repeated declarations: */
#spin, #spin:before, #spin:after {
content: "";
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
}
#spin {
border-top-color: #3498db;
animation: spin 2s linear infinite;
}
#spin:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #e74c3c;
animation: spin 3s linear infinite;
}
#spin:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #f9c922;
animation: spin 1.5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="app">
<div id="spin"></div>
<div id="maincontainer">
I have some contents here
</div>
</div>
So I got a little circle shape with an icon that when I click, it will make the icon disappear and show a few elements in another div. The circle shape transforms into a 260x260 px square with CSS animation.
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?
I can't just use opacity 0 to opacity 1 because I need the icon to really disappear with display none. Same for the other when going back to circle+icon state. But I just can't even make the opacity animation work. I also tried with those keyframes of fadeIn and fadeOut but didn't work either.
I found this fiddle but it looks so ugly having to use a setTimeout.
Is there a way to solve this with only CSS?
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
display: none;
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: block;
}
#keyframes opacity-down {
0% {
visibility: visible;
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes opacity-up {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
/*
#-webkit-keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#-webkit-keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}
#keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is
there a way to handle this by toggling a CSS class over the parent
element?
You can do this without animation with toggle classes
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
$('.children-2').toggleClass('show1');
$('.children-1').toggleClass('show2');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
opacity: 0;
transition: opacity 1s;
}
.children-1 {
opacity: 1;
transition: opacity 1s;
}
.show1 {
opacity: 1;
}
.show2 {
opacity: 1;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Just need a scrolling set of divs, almost like a slide show! yet to find a solution, need a way to make the commented-out div be scroll-able by clicking somewhere on the page or and arrow image? is this possible without a page reload every "slide"? want it to slide into transition on click and able to go back "home"
HTML:
<div id="wrapper_home">
<div id="tey_home">
<div id="tey_button">
<img src="images/tey_logo-01.png" width="239" height="239" alt="tey_logo" />
</div>
</div>
<!--
<div id="afiw_home">
<div id="home_button"> <img src="images/home.png" width="52" height="52" alt="home" class="withfadeout"/> </div>
<div id="afiw_button">
<img src="images/afiw_logo-01.png" width="460" height="142" class="withfadein2"/>
</div>-->
</div>
</div>
CSS:
.withfadein{
opacity: 0;
-webkit-animation: load 20s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadein2{
opacity: 0;
-webkit-animation: load 10s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
#wrapper_index {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
background-image: url(images/entry_image-01.png);
background-repeat: no-repeat;
position: relative;
}
#enter_button {
width: 140px;
position: absolute;
left: 434px;
top: 501px;
}
#wrapper_home {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
position: relative;
}
#afiw_home {
background-image: url(images/afiw.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#afiw_button {
height: 142px;
width: 460px;
position: absolute;
left: 276px;
top: 275px;
}
#home_button {
height: 52px;
width: 52px;
padding-top: 50px;
padding-left: 50px;
}
#tey_home {
background-image: url(images/tey-01.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#tey_home #tey_button {
position: absolute;
height: 239px;
width: 239px;
left: 399px;
top: 222px;
}
thank you so much for any help
You should use jquery:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
This catch a 'click' event, but you can change it as you wish
use the .animate in jquery
var target = $("Target Div")
$("Div to fly").animate({'top': target.offset().top,
'left':target.offset().left}, 1000);