0

$(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.

Mohammad
  • 21,175
  • 15
  • 55
  • 84
Talha Özdemir
  • 23
  • 5
  • 1
    A working demonstration of the problem would help a lot here. JS animation is notoriously problematic though, as it's not hardware accelerated. I'd suggest doing the animation in CSS if possible. Also note that your second `click()` handler seems to be outside the document.ready handler, so won't be attached to the element correctly. – Rory McCrossan Nov 28 '16 at 09:05
  • without any HTML structure provided by you. i suggest you use JQ just to add different classes to the elements on click . like : ` $(".grammar-box2").addClass("animated") ` ( or `toggleClass` ) and then in CSS use CSS-animations to animate the element with the new class – Mihai T Nov 28 '16 at 09:07
  • thanks for the response, second click handler is inside. But it will seem better, if it is as you said.. @Rory McCrossan – Talha Özdemir Nov 28 '16 at 09:11
  • But I can't give same effect to the box, if I use addClass("animated"), maybe I should work on it more. I will try this at least, thanks. @Mihai T – Talha Özdemir Nov 28 '16 at 09:25
  • share all your RELEVANT code . HTML and CSS so we can help you better. just with that JQ code ...we can't give you a 100% working solution – Mihai T Nov 28 '16 at 09:26
  • I just shared it but it cant load the link so it is not lagging right now. @Mihai T – Talha Özdemir Nov 28 '16 at 09:39
  • Change from `mouseover` to `mouseenter`. You're also binding the click events *multiple* times - so when you finally click it has to do the same thing maybe 100s of times. – freedomn-m Nov 28 '16 at 10:24
  • I tried mouseenter, but it didn't solve the problem. How can I restart my click event at the beginning of every clicking? @freedomn-m – Talha Özdemir Nov 28 '16 at 11:25

1 Answers1

0

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Thank you, this solved my problem, it isn't lagging no more. – Talha Özdemir Nov 28 '16 at 11:08
  • but again if I click so much it delays appearing instantly and it appears late for example: If I click first time it appears in 0.1 second but if I click 15 times it appears in 1.5 second. but right now it is better than before. – Talha Özdemir Nov 28 '16 at 11:21
  • well.. that's how it works. you can't do faster than this. if this helped you...upvote and/or accept my answer. thanks :) – Mihai T Nov 28 '16 at 14:30
  • ahh sorry I forgot it, I really thank you for your help. @Mihai T – Talha Özdemir Nov 28 '16 at 16:26