CODEWITHSUNDEEP
jqueryhtmlcssanimation
Froy
Froy

Reputation: 748

How to get rid of jquery glitch effect?

I am using jquery animation to increase the width and height of a div. The animation is triggered when clicking on the box and then reverted back to it's original size when clicking on the back font-awesome icon that appears.

html:

<body>
<div class="flex-container">
        <div class="flex-items">
    <i class="fa fa-reply fa-2x"></i>1
</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>2</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>3</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>4</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>5</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>6</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>7</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>8</div>
    </div>
</body>

css:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightblue;
}
.flex-container{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
}
.flex-items{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    order: 1;
}
i{
    visibility: hidden;
    float: right;
}
.header{
    height: 50px;
    background-color: #333;
}
.headerText{
    margin-left: 40px;
    color: white;
}

jquery: 

$(document).ready(function(){
    $(".flex-items").click(function(){
        console.log(this.css);
        $(this)
        .animate({
            width: '100vw',
            height: '100vh'},{
            duration: 300,
            ease: "slow"})  
        .css("order", "0");

        i = $(this).children();
        $(i).css("visibility" ,"initial");
    });
    $("i").click(function(evt){
            evt.stopPropagation();
            $(".flex-items").animate({
            width: '300px',
            height: '300px'},{
            duration: 300,
            ease: "linear"})
            .css("order", "1");
            $(this).css("visibility" ,"hidden");
    });
});

There is a 'glitchy' type of effect that happens when you close the div and it goes back to it's original state. Is there anyway to make that transition smoother?

Codepen

Upvotes: 0

Views: 329

Answers (2)

Christian Bonato
Christian Bonato

Reputation: 1306

Let us not forget that flexboxes can also be translated using transform:translate3d([whatever vertical], [whatever horizontal], [set to 0 to make sure we're requiring GPU through "3d"]), giving you access to complex flexbox grids, where some flex panes may be elastic and therefore shrink/grow, and other could slide over/under other flex panes (with a little help from z-index).

Upvotes: 1

Reyno
Reyno

Reputation: 6525

Use css transitions they are smoother most of the time. transition:all 0.3s ease; My example needs some tweaks but it does the trick Codepen

Upvotes: 0

Related Questions