Karol Gasienica Karol Gasienica - 4 months ago 8
jQuery Question

jQuery is not animating div in the same time

I have a problem with jQuery animate, I want to animate a few elements in one time. It is animating .top-left-lang first and then all flags. It need to be animated in same time, because it looks wrong...

Thanks in advance!

Sample of my code can be found here (please click first flag): http://vps274433.ovh.net/zadanie/OOstende/index.html

Here is my code:

<div class="background-black"></div>
<div class="top-left-lang">
<div class="flag1"></div>
<div class="flag2"></div>
<div class="flag3"></div>
<div class="flag4"></div>
<div class="flag5"></div>
<div class="flag6"></div>
</div>
<div class="container">
<div id="chest">
<div class="heart left side top"></div>
<div class="heart center">&hearts;</div>
<div class="heart right side"></div>
</div>
</div>


var flagwidth = '-=184px';
var flagheight = '-=184px';
var click_check = false;

$( ".flag1" ).click(function() {
if (click_check == false){
click_check = true;

$( ".flag1" ).css("opacity", "1");
$( ".top-left-lang" ).css("margin-top", "20px");
$( ".top-left-lang" ).css("margin-left", "20px");

$( ".background-black" ).fadeOut( "slow" );
$( ".top-left-lang" ).css("padding", "5px");
$( ".flag1" ).css("margin-right", "2px");
$( ".flag2" ).css("margin-right", "2px");
$( ".flag3" ).css("margin-right", "2px");
$( ".flag4" ).css("margin-right", "2px");
$( ".flag5" ).css("margin-right", "2px");
$( ".flag6" ).css("margin-right", "2px");

$(".top-left-lang").animate({
height: '-=182px',
width: '-=1140px',
top: '0',
left: '0'
}, { duration: 500, queue: false });

$(".flag1").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
$(".flag2").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
$(".flag3").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
$(".flag4").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
$(".flag5").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
$(".flag6").animate({
height:flagheight,
width:flagwidth
}, { duration: 500, queue: false });
}
});


@import url('reset.css');

body{
background-color:#2C2D32;
}

.container
{
margin-top:300px;
}

.background-black
{
z-index:5;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, 0.6)
}
.top-left-lang
{
z-index:100;
position:absolute;
margin-left:calc(50% - 680px);
height:200px;
width:1320px;
margin-top:calc(50vh - 400px);
background-color:#1B1C20;
color:white;
border:white 2px solid;
padding:20px;
border-radius:150px;
overflow:hidden;
}

.flag1
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
border-radius:200px;
background:url('../img/pl.png');
background-size:100%;
opacity:0.7;
transition: .5s;
}

.flag1:hover
{
opacity:1;
cursor:pointer;
}

.flag2
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
background:url('../img/uk.png');
background-size:100%;
opacity:0.7;
transition: .5s;
border-radius:200px;
}

.flag2:hover
{
opacity:1;
cursor:pointer;
}

.flag3
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
background:url('../img/fr.png');
background-size:100%;
opacity:0.7;
transition: .5s;
border-radius:200px;
}

.flag3:hover
{
opacity:1;
cursor:pointer;
}


.flag4
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
background:url('../img/be.png');
background-size:100%;
opacity:0.7;
transition: .5s;
border-radius:200px;
}

.flag4:hover
{
opacity:1;
cursor:pointer;
}

.flag5
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
background:url('../img/ru.png');
background-size:100%;
opacity:0.7;
transition: .5s;
border-radius:200px;
}

.flag5:hover
{
opacity:1;
cursor:pointer;
}

.flag6
{
margin-left:10px;
margin-right:10px;
float:left;
width:200px;
height:200px;
background:url('../img/ro.png');
background-size:100%;
opacity:0.7;
transition: .5s;
border-radius:200px;
}

.flag6:hover
{
opacity:1;
cursor:pointer;
}

/* Serce */

@-webkit-keyframes beat {
0% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);}
50% {-webkit-transform: scale(1.1) rotate(225deg); -webkit-box-shadow:0 0 70px rgba(213,9,60,0.6);}
100% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);}
}
@-moz-keyframes beat {
0% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);}
50% {-moz-transform: scale(1.1) rotate(225deg); -moz-box-shadow:0 0 70px rgba(213,9,60,0.6);}
100% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);}
}
@keyframes beat {
0% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;}
50% {transform: scale(1.1) rotate(225deg); box-shadow:0 0 70px #d5093c;}
100% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;}
}

#background {
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background: #ffa5a5;
background: -moz-linear-gradient(top, #ffa5a5 0%, #ffd3d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa5a5), color-stop(100%,#ffd3d3));
background: -webkit-linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%);
background: linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%);
}
#chest {
position:relative;
width:500px;
height:450px;
margin:0 auto;
}
.heart {
position:absolute;
z-index:2;
background: -moz-linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
background: -webkit-gradient(linear, right 50%, left 50%, color-stop(0%,#F50A45), color-stop(40%,#d5093c));
background: -webkit-linear-gradient(-90deg, #F50A45 0%,#d5093c 40%);
background: linear-gradient(-90deg, #F50A45 0%,#d5093c 40%);
-webkit-animation: beat 0.7s ease 0s infinite normal;
-moz-animation: beat 0.7s ease 0s infinite normal;
animation: beat 0.7s ease 0s infinite normal;
}
.heart.center {
background: -moz-linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#B80734), color-stop(40%,#d5093c));
background: -webkit-linear-gradient(-45deg, #B80734 0%,#d5093c 40%);
background: linear-gradient(-45deg, #B80734 0%,#d5093c 40%);
}
.heart.top {
z-index:3;
}
.side {
top:50px;
width:220px;
height:220px;
-moz-border-radius: 220px;
-webkit-border-radius: 220px;
border-radius: 220px;
}
.center {
width:210px;
height:210px;
bottom:100px;
left:145px;
font-size:0;
text-indent:-9999px;
}
.left {
left:62px;
}
.right {
right:62px;
}

Answer

You just need to remove animate when changing .flags properties and change it without any animation because it is already has animation on its style for example use

$(".flag1").css({
    height:flagheight,
    width:flagwidth
});

instead of

$(".flag1").animate({
    height:flagheight,
    width:flagwidth
},500);

https://jsfiddle.net/udm86reh/

var flagwidth = '-=184px';
var flagheight = '-=184px';
var click_check = false;

$( ".flag1" ).click(function() {

  if(click_check == false){
    click_check = true;

    $( ".flag1" ).css("opacity", "1");
    $( ".top-left-lang" ).css("margin-top", "20px");
    $( ".top-left-lang" ).css("margin-left", "20px");

    $( ".background-black" ).fadeOut( "slow" );
    $( ".top-left-lang" ).css("padding", "5px");
    $( ".flag1" ).css("margin-right", "2px");
    $( ".flag2" ).css("margin-right", "2px");
    $( ".flag3" ).css("margin-right", "2px");
    $( ".flag4" ).css("margin-right", "2px");
    $( ".flag5" ).css("margin-right", "2px");
    $( ".flag6" ).css("margin-right", "2px");


    $(".top-left-lang").animate({
      height: '-=182px',
      width: '-=1140px',
      top: '0',
      left: '0'
    }, 500);
    $(".flag1").css({
      height:flagheight,
      width:flagwidth
    });
    $(".flag2").css({
      height:flagheight,
      width:flagwidth
    });
    $(".flag3").css({
      height:flagheight,
      width:flagwidth
    });
    $(".flag4").css({
      height:flagheight,
      width:flagwidth
    });
    $(".flag5").css({
      height:flagheight,
      width:flagwidth
    });
    $(".flag6").css({
      height:flagheight,
      width:flagwidth
    });

  }

});
Comments