i write some codes for my simple slider but some things run wrong
i want to reset canvasHeight
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
img.css({'top':- (height -canvasHeight) })
canvasHeight+=100
var top = img.css('top')
if (top == '0px'){
myStopFunction()
img.css({'top':-height})
canvasHeight = 0
canvasHeight+=100
height = new $('img').height() - canvasHeight;
setInterval(function(){ myTimer() }, 1000);
}
}
function myStopFunction() {
clearInterval(myVar);
}
https://jsfiddle.net/n1uzy4u3/
You're not assigning the setInterval that restarts it to the myVar variable, so the next time you try to clear it, it's still using the interval ID from the original call. This causes multiple intervals to be running, and therefore multiple, competing calls of your function.
Also, you've got a bunch of implicit global vars, because you're missing the comma separator.
var img = $('img'),
time = 2000,
top = img.css('top'),
canvasHeight = 100,
height = $('img').height() - canvasHeight;
img.css({
'top': -height
})
var myVar = setInterval(myTimer, 1000);
function myTimer() {
img.css({ 'top': -(height - canvasHeight) })
canvasHeight += 100
var top = img.css('top')
if (top == '0px') {
myStopFunction()
img.css({ 'top': -height })
canvasHeight = 0
canvasHeight += 100
height = new $('img').height() - canvasHeight;
myVar = setInterval(myTimer, 1000);
}
}
function myStopFunction() {
clearInterval(myVar);
}
.box {
position: relative;
width: 320px;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
.scene {
height: 100%;
width: 100%;
float: left;
background-color: #996711;
}
.scene-element {
position: relative;
left: 0;
width: 100%;
height: 100%;
}
.scene-element img {
position: absolute;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="scene">
<div class="scene-element">
<img src="https://image.ibb.co/gXKiMR/01.png">
</div>
</div>
</div>
I also removed the anonymous functions you were passing to setInterval. You can just pass the actual function you're calling if there's no other code to run.
Related
I have this code that after a while starts to slow down, I tried everything to reduce the script and increase performance but nothing works.
Here's a snippet with the code:
var rotated = false;
function load() {
setInterval(rain, 100);
function rain() {
var deg = rotated ? 0 : 20;
var variable = screen.width + screen.width;
var side = Math.floor((Math.random() * variable));
var pos = -20;
var element = document.createElement('div');
var position = Math.random() < 0.5 ? 1 : 3;
element.style.webkitTransform = 'rotate(' + deg + 'deg)';
element.style.mozTransform = 'rotate(' + deg + 'deg)';
element.style.msTransform = 'rotate(' + deg + 'deg)';
element.style.oTransform = 'rotate(' + deg + 'deg)';
element.style.transform = 'rotate(' + deg + 'deg)';
element.style.position = "absolute";
element.style.width = "1px";
element.style.height = "10px";
element.style.top = "-20px";
element.style.zIndex = position;
document.getElementById('body').appendChild(element);
if (position == 3) {
element.style.backgroundColor = "#0018FF";
}
if (position == 1) {
element.style.backgroundColor = "#8590FF";
}
element.style.left = side + 'px';
setInterval(frame, 1);
setInterval(frame2, 2);
setInterval(frameChecker, 100);
function frame() {
pos++;
element.style.top = pos + 'px';
}
function frame2() {
side--;
element.style.left = side + "px";
}
function frameChecker() {
element.id = pos;
if (element.id > screen.height + 500) {
element.remove();
}
}
}
}
body {
font-family: "Times New Roman", Times, serif;
}
html,
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: black
}
.center {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
text-align: center;
z-index: 2;
}
.center span {
position: relative;
font-size: 500%;
text-align: center;
top: 45%;
transform: translateY(-50%);
color: white
}
<!DOCTYPE html>
<html>
<head>
<!--CSS and SCRIPT here-->
<title>GOT 404 ERROR</title>
</head>
<body onload="load()" id="body">
<div style="width:100%; height:100%; position: relative;">
<div class="center"><span>ERROR 404</span></div>
</div>
</body>
</html>
The whole JavaScript code is to make it rain, I think the problem is in somewhere in the variables but when I set as global only one dot of "rain" shows up (by global i mean outside of any function)
so i done it:
every 100 miliseconds is added a dot, this dot start 3 functions/dot to move and check its location, so i just added a "interval cleaner",(the frameChecker() if settement here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: "Times New Roman", Times, serif;}
html, body{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: black}
.center {
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
text-align: center;
z-index: 2;}
.center span{
position: relative;
font-size: 500%;
text-align: center;
top: 45%;
transform: translateY(-50%);
color: white}
</style>
<script type="text/javascript">
var rotated = false;
function load(){
setInterval(rain, 200);
function rain(){
var deg = rotated ? 0 : 20;
var variable = screen.width+screen.width;
var side = Math.floor((Math.random() * variable));
var pos = -20;
var element = document.createElement('div');
var position = Math.random() < 0.5 ? 1 : 3;
element.style.webkitTransform = 'rotate('+deg+'deg)';
element.style.mozTransform = 'rotate('+deg+'deg)';
element.style.msTransform = 'rotate('+deg+'deg)';
element.style.oTransform = 'rotate('+deg+'deg)';
element.style.transform = 'rotate('+deg+'deg)';
element.style.position = "absolute";
element.style.width = "1px";
element.style.height = "10px";
element.style.top = "-20px";
element.style.zIndex = position;
document.getElementById('body').appendChild(element);
if (position == 3){element.style.backgroundColor = "#0018FF";}
if (position == 1){element.style.backgroundColor = "#8590FF";}
element.style.left = side + 'px';
var framee = setInterval(frame, 1);
var framee2 = setInterval(frame2, 2);
var frameCheckerr = setInterval(frameChecker, 100);
function frame() {
pos++;
element.style.top = pos + 'px';}
function frame2() {
side--;
element.style.left = side + "px";}
function frameChecker(){
element.id = pos;
if (element.id > screen.height+20){element.remove();clearInterval(framee);clearInterval(framee2);clearInterval(frameCheckerr);}}}}
</script>
<title>GOT 404 ERROR</title>
</head>
<body onload="load()" id="body">
<div style="width:100%; height:100%; position: relative;">
<div class="center"><span>ERROR 404</span></div>
</div>
</body>
</html>
it was petty tuff to fund out, thanks to #Pointy for saying about the functions being allways on after called with setInterval() and also the first timer (rain()) can be used with timer set was 500 for better performace
Every time your rain() function runs because of its interval timer (every 100 milliseconds), it starts three new interval timers with even faster intervals. After a minute or so, therefore, you'll have hundreds of interval timers running. That's what is making everything slow down.
You might consider setTimeout() for those nested functions. The setTimeout function calls it's callback only once after a single delay.
I am creating a website with few animation, below is the piece of javascript and css which is revealing image from left to right
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
.mask {
background:white;
max-width: 640px;
z-index:1;
height: 426px;
position: relative;
overflow: hidden;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mask">
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
and then an javascript which reveals image from right to left.
var i = 0;
var interval = setInterval(function () {
$('.mask3').css({ left: -i + "%" });
i++;
if (i === 0) {
clearInterval(interval);
}
}, 20);
.wrapper {
width: 640px;
height: 430px;
position: relative;
}
.mask3 {
position: absolute;
top: 0;
left: 0;
background:white;
width: 100%;
height: 100%;
z-index:1;
}
.img {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="mask3">
</div>
<div class="img">
<img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
</div>
</div>
Now I am trying to load this animation only when div is being displayed, or user scroll down to specific div, and then the animation shall roll back.
I tried few of the scripts, but all of them guided to use if else statement although I am not able to pick anything which is working, can someone please help me out on this one.
This is a very rough answer, but you can do this if you want. You will still need to work on your animation function more to make it hide and then display based on how you want it to be.
var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();
function myAnimation() {
elem.show();
var i = 0;
var interval = setInterval(function () {
$('.mask').width(i + "%");
i++;
if (i == 101) {
clearInterval(interval);
}
}, 20);
counter++;
}
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
myAnimation();
}
});
The counter is basically to animate it once, because you will trigger this animation on every scroll.
So I'm trying to make simple animation. When you press somewhere inside blue container, a circle should be created in this place and then go up. After some research I found how to put JS values into keyframes, but it's changing values for every object not just for freshly created. If you run snipped and press somewhere high and then somewhere low you will see what I'm talking about.
I found some AWESOME solution with Raphael library, but I'm a beginner and I'm trying to make something like this in JS. Is it even possible? How?
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
var ss = document.styleSheets;
var keyframesRule = [];
function findAnimation(animName) { //function to find keyframes and insert replace values in them
for (var i = 0; i < ss.length; i++) {
for (var j = 0; j < ss[i].cssRules.length; j++) {
if (window.CSSRule.KEYFRAMES_RULE == ss[i].cssRules[j].type && ss[i].cssRules[j].name == animName) {
keyframesRule.push(ss[i].cssRules[j]);
}
}
}
return keyframesRule;
}
function changeAnimation (nameAnim) { //changing top value to cursor position when clicked
var keyframesArr = findAnimation(nameAnim);
for (var i = 0; i < keyframesArr.length; i++) {
keyframesArr[i].deleteRule("0%");
keyframesArr[i].appendRule("0% {top: " + bubble.posY + "px}");
}
}
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
//bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
changeAnimation("moveUp");
bubbleCircle.className += " animate";
}
aquarium.addEventListener("click", createBubble);
//console.log(bubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20,255,200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250,250,250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
-webkit-animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
}
#keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Here is a possible solution. What I did:
Remove your functions changeAnimation () and findAnimation() - we don't need them
Update the keyframe to look like - only take care for the 100%
#keyframes moveUp { 100% {top: 80px;} }
Assign top of the new bubble with the clientY value
After 5 seconds set top of the bubble to the offset of the #container(80px) - exactly when animation is over to keep the position of the bubble, otherwise it will return to initial position
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
bubbleCircle.className += " animate";
// The following code will take care to reset top to the top
// offset of #container which is 80px, otherwise circle will return to
// the position of which it was created
(function(style) {
setTimeout(function() {
style.top = '80px';
}, 5000);
})(bubbleStyle);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
-webkit-animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
}
#keyframes moveUp {
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp {
100% {
top: 80px;
}
}
<body>
<div id="container"></div>
<div id="surface"></div>
</body>
The problem about your code was that it is globally changing the #keyframes moveUp which is causing all the bubbles to move.
The problem with your code is that you're updating keyframes which are applied to all bubbles. I tried another way of doing it by using transition and changing the top position after the element was added to the DOM (otherwise it wouldn't be animated).
The main problem here is to wait the element to be added to the DOM. I tried using MutationObserver but it seems to be called before the element is actually added to the DOM (or at least rendered). So the only way I found is using a timeout which will simulate this waiting, although there must be a better one (because it may be called too early, causing the bubble to directly stick to the top), which I would be happy to hear about.
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.classList.add("bubble");
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
setTimeout(function() {
bubbleCircle.classList.add("moveUp");
}, 50);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
transition: 5s;
}
.moveUp {
top: 80px !important;
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Also, I used the classList object instead of className += ... because it is more reliable.
I spent the last two days getting a ribbon animation to work with divs so that I can later add li link elements to them to act as a menu. I used the progess bar animation code as inspiration from w3schools. The animation works great, only issue is that the code is very un-DRY. I tried to simplify the code by not repeating myself in the CSS and especially not in the javascript but I kept getting closure issues even after using self invoked functions. I would be greatful if anyone can give me some advice or even a solution that will greatly shorten my code to have the same animation effect. I know that I will have several ribbons on the page, each with different number of ribbon layers, so the code as it is can get very complicated very fast. N.B the code below is the working version.
function move1() {
var width = 0;
var elem = document.getElementById("ribbon-part-1");
var id = setInterval(frame, 1);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function move2() {
var width = 0;
var elem = document.getElementById("ribbon-part-2");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move3() {
var width = 0;
var elem = document.getElementById("ribbon-part-3");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move4() {
var width = 0;
var elem = document.getElementById("ribbon-part-4");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move5() {
var width = 0;
var elem = document.getElementById("end-ribbon");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move() {
setTimeout(move1, 300);
setTimeout(move2, 600);
setTimeout(move3, 900);
setTimeout(move4, 1200);
setTimeout(move5, 1500);
}
* {
box-sizing: border-box;
}
.front-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
z-index: 1;
transform: skewY(-11deg);
}
.back-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
transform: skewY(4.7deg);
z-index: -1;
}
#ribbon-part-1 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-2 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-2 {
display: block;
float: right;
}
#ribbon-part-3 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-4 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-4 {
display: block;
float: right;
}
#end-ribbon {
fill: rgb(70, 125, 76);
width: 0%;
}
<h1>JavaScript ribbon animation</h1>
<div class="back-ribbon">
<div id="ribbon-part-1"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-2"></div>
</div>
<div class="back-ribbon">
<div id="ribbon-part-3"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-4"></div>
</div>
<svg id="end-ribbon">
<path d="M-6 17 L35 24 L24 10 Z" />
</svg>
<br>
<br>
<br>
<button onclick="move()">Click Me</button>
Perhaps automate the creation of the different ribbons and their styles with DOM manipulation in the JS body, using ReactJS or similar.
I need to make a colored div move horizontally to the right and when it hits the edge it should double in size and twice the speed rotating around the center.
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
++leftPosition;
if (leftPosition == 800){
--leftPosition;
it stops at 800 px like I told it but it wont go back
Let's clean the code up a bit and implement what you want. In order:
Move to 800px
When 1 is done, go back, twice as fast, and double in size.
We'll do this using one scoped variable: speed. speed will be the default speed and direction.
I have also separated your code in setInterval in order to not block execution of the page.
function move() {
var elem = document.getElementById("box"),
speed = 1,
currentPos = 0;
// Reset the element
elem.style.left = 0+"px";
elem.style.right = "auto";
var motionInterval = setInterval(function() {
currentPos += speed;
if (currentPos >= 800 && speed > 0) {
currentPos = 800;
speed = -2 * speed;
elem.style.width = parseInt(elem.style.width)*2+"px";
elem.style.height = parseInt(elem.style.height)*2+"px";
}
if (currentPos <= 0 && speed < 0) {
clearInterval(motionInterval);
}
elem.style.left = currentPos+"px";
},20);
}
Fiddle: http://tinker.io/7d393 . You'll see, it works.
Think about what happens as soon as leftPosition has reached 799:
++leftPosition; #leftPostion == 800
if (leftPosition == 800){ #This becomes true
--leftPosition; #leftPostion == 799
So you start where you left off, and this will repeat on the next time you call move()
To fix this, you need to add a direction to the movement:
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
var direction = 1;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
leftPosition += direction;
if (leftPosition == 800){
direction = -1;
Here's a (mostly) CSS solution: http://tinker.io/7d393/6
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
#box.move{
-webkit-animation: myanim 5s;
animation: myanim 5s;
}
#-webkit-keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
#keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box').toggleClass('move')});
});
Here is a mostly jQuery solution: http://tinker.io/7d393/7
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box')
.css({left:0,top:0,width:'100px',height:'100px'})
.animate({left:'800px',top:0,width:'100px',height:'100px'},3000)
.animate({left:'800px',top:0,width:'200px',height:'200px'},20)
.animate({left:0,top:0,width:'200px',height:'200px'},1500);
});
});