Talha Özdemir Talha Özdemir - 1 day ago 4
HTML Question

jquery .animate() is lagging, if I use it 5 times or more



$(document).ready(function() {
$(".g-t").mouseover(function() {
$(this).addClass("gramericin")
$(".g-t").click( function () {
$(".grammar-box2").stop().animate({ width: 'show' });
$(".grammar-box2 #div1").load("http://stackoverflow.com/questions/40840852/difference-between-res-setheader-and-res-header-in-node-js");
});
});
$(".g-t").mouseout(function() {
$(this).removeClass("gramericin");
$(".grammar-box2").click(function() {
$(".grammar-box2 #div1").empty();
$(".grammar-box2").stop().animate({ width: 'hide' });
});
});
});

.grammar-box2 {
display: none;
width: 450px;
height: 520px;
position: absolute;
right: 0;
z-index: 10;
background-color: rgb(228, 255, 179);
color: black;
font-size: large;
font-weight: bolder;
padding: 10px;
}
.gramericin {
background-color: rgba(200, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grammar-box2">
<div id="div1"></div>
</div>
<p class="g-t">something</p>





$(document).ready(function() {
$(".g-t").click( function () {
$(".grammar-box2").animate({ width: 'show' });
$(".grammar-box2 #div1").load("grammar.html #amisare");
});
});

$("#butonx").click(function() {
$(".grammar-box2 #amisare").empty();
$(".grammar-box2").animate({ width: 'hide' });
});
});


I tried
.stop()
but it didn't work. If I animate the box a lot it starts lagging when it animates the box.

edit: when I remove
load()
event the
animate()
isn't lagging. But I must use
load()
event to get some data.

Answer

well. with your code i made an animation just using transition in CSS and changing between transform:scaleX(0) and transform:scaleX(1) when clicking on something

also i used transform-origin:right so the scale has its origin in the right side of the div.

in JQ i changed the animation with addClass and removeClass

let me know if this is what you wanted

see snippet below or jsfiddle

$(".g-t").mouseover(function() {
	$(this).addClass("gramericin")
$(".g-t").click( function () {
$(".grammar-box2").addClass("animateME")
$(".grammar-box2 #div1").load("http://stackoverflow.com/questions/40840852/difference-between-res-setheader-and-res-header-in-node-js");	
});	
});
$(".g-t").mouseout(function() {
	$(this).removeClass("gramericin"); 
	$(".grammar-box2").click(function() {
	$(".grammar-box2 #div1").empty();
	$(".grammar-box2").removeClass("animateME")
});
});
.grammar-box2 {
				width: 450px;
				height: 520px;
				position: absolute;
				right: 0;
				z-index: 10;
				background-color: rgb(228, 255, 179);
				color: black;
				font-size: large;
				font-weight: bolder;
				padding: 10px;
        transform:scaleX(0);
        transition:0.3s;
        transform-origin:right;
				
}
.gramericin {
				background-color: rgba(200, 0, 0, 0.5);
}
.animateME {
  transform:scaleX(1)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grammar-box2">
<div id="div1"></div>
</div>

<p class="g-t">something</p>

Comments