We Keep Coding

How to prevent an animated icon from bleeding out from within an input box

I have an input field with a search Icon inside. When the user clicks inside the input field the Icon fades out to the left, in doing so, it bleeds out of the input box.
Is there a way to prevent the search Icon from bleeding out? I don't want the Icon to be visible past the border of the input box.
cshtml page:
<header>
<nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="search-bar center">
<img id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
<input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
</div>
</nav>
</header>
js:
$('#searchBox').on({
focus: function () {
document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
},
blur: function () {
document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");
}
});
css:
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.icon {
position: absolute;
top: -2px;
left: 0;
padding: 13px 15px 13px 11px;
}
.search-icon {
width: 50px;
height: auto;
}
.search-bar .input-text {
height: 45px;
padding: 8px 6px 8px 40px;
max-width: 200%;
border-radius: 25px;
outline: none !important;
border: 2px solid;
width: 550px;
transition-property: padding;
transition-duration: 0.5s;
}
.input-text:active, .input-text:focus {
padding: 8px 6px 8px 15px;
}
.fadeLeftSearchIcon {
animation-name: fadeInLeft;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.fadeRightSearchIcon {
animation-name: fadeInRight;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.center {
margin: 0 auto;
text-align: center;
display: inline-block;
top: 0;
bottom: 0;
}

Try to change to -25% ,check official site:
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
Result:

Issue with adding a new animation to the text

I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?

The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>

How to add scroll class to element and remove it when done

Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected.
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>

You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>

gmail-like loading with css animation and keyframes

I'm trying to reproduce the gmail loading animation. I'm starting from the current loading element, that it's done via a CSS animation and HTML only.
The logo is neither a SVG path and it makes a clever use of animation and keyframes. How the CSS animation code was assembled? I argue that it's difficult to understand if this was done programmatically or by some tooling.
$('#loading').show()
body {
margin: 0;
width: 100%;
height: 100%
}
body,
td,
input,
textarea,
select,
#loading {
font-family: arial, sans-serif
}
input,
textarea,
select {
font-size: 100%
}
#loading {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff
}
.msg {
color: #757575;
font-size: 20px;
letter-spacing: .2px;
line-height: 20px;
text-align: center
}
#nlpt {
animation: a-s .5s 2.5s 1 forwards;
background-color: #f1f1f1;
height: 4px;
margin: 56px auto 20px;
opacity: 0;
overflow: hidden;
position: relative;
width: 300px
}
#nlpt::before {
animation: a-lb 20s 3s linear forwards;
background-color: #db4437;
content: '';
display: block;
height: 100%;
position: absolute;
transform: translateX(-300px);
width: 100%
}
#keyframes a-lb {
0% {
transform: translateX(-300px)
}
5% {
transform: translateX(-240px)
}
15% {
transform: translateX(-30px)
}
25% {
transform: translateX(-30px)
}
30% {
transform: translateX(-20px)
}
45% {
transform: translateX(-20px)
}
50% {
transform: translateX(-15px)
}
65% {
transform: translateX(-15px)
}
70% {
transform: translateX(-10px)
}
95% {
transform: translateX(-10px)
}
100% {
transform: translateX(-5px)
}
}
#keyframes a-s {
100% {
opacity: 1
}
}
#keyframes a-h {
100% {
opacity: 0
}
}
#keyframes a-nt {
100% {
transform: none
}
}
#keyframes a-e {
43% {
animation-timing-function: cubic-bezier(.8, 0, .2, 1);
transform: scale(.75)
}
60% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-16px)
}
77% {
animation-timing-function: cubic-bezier(.16, 0, .2, 1);
transform: none
}
89% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-5px)
}
100% {
transform: none
}
}
#keyframes a-ef {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: scaleY(.42)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: scaleY(.98)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: scaleY(.96)
}
100% {
transform: none
}
}
#keyframes a-efs {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
opacity: .3
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
opacity: .03
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
opacity: .05
}
100% {
opacity: 0
}
}
#keyframes a-es {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: rotate(-25deg)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: rotate(-42.5deg)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: rotate(-42deg)
}
100% {
transform: rotate(-43deg)
}
}
.invfr {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 0;
height: 0;
border: 0
}
.msgb {
position: absolute;
right: 0;
font-size: 12px;
font-weight: normal;
color: #000;
padding: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading" style="display:none">
<div style="bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0">
<div style="animation:a-h .5s 1.25s 1 linear forwards,a-nt .6s 1.25s 1 cubic-bezier(0,0,.2,1);background:#eee;border-radius:50%;height:800px;left:50%;margin:-448px -400px 0;position:absolute;top:50%;transform:scale(0);width:800px"></div>
</div>
<div style="height:100%;text-align:center">
<div style="height:50%;margin:0 0 -140px"></div>
<div style="height:128px;margin:0 auto;position:relative;width:176px">
<div style="animation:a-s .5s .5s 1 linear forwards,a-e 1.75s .5s 1 cubic-bezier(0,0,.67,1) forwards;opacity:0;transform:scale(.68)">
<div style="background:#ddd;border-radius:12px;box-shadow:0 15px 15px -15px rgba(0,0,0,.3);height:128px;left:0;overflow:hidden;position:absolute;top:0;transform:scale(1);width:176px">
<div style="animation:a-nt .667s 1.5s 1 cubic-bezier(.4,0,.2,1) forwards;background:#d23f31;border-radius:50%;height:270px;left:88px;margin:-135px;position:absolute;top:25px;transform:scale(.5);width:270px"></div>
<div style="height:128px;left:20px;overflow:hidden;position:absolute;top:0;transform:scale(1);width:136px">
<div style="background:#e1e1e1;height:128px;left:0;position:absolute;top:0;width:68px">
<div style="animation:a-h .25s 1.25s 1 forwards;background:#eee;height:128px;left:0;opacity:1;position:absolute;top:0;width:68px"></div>
</div>
<div style="background:#eee;height:100px;left:1px;position:absolute;top:56px;transform:scaleY(.73)rotate(135deg);width:200px"></div>
</div>
<div style="background:#bbb;height:176px;left:0;position:absolute;top:-100px;transform:scaleY(.73)rotate(135deg);width:176px">
<div style="background:#eee;border-radius:12px 12px 0 0;bottom:117px;height:12px;left:55px;position:absolute;transform:rotate(-135deg)scaleY(1.37);width:136px"></div>
<div style="background:#eee;height:96px;position:absolute;right:0;top:0;width:96px"></div>
<div style="box-shadow:inset 0 0 10px #888;height:155px;position:absolute;right:0;top:0;width:155px"></div>
</div>
<div style="animation:a-s .167s 1.283s 1 linear forwards,a-es 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;background:linear-gradient(0,rgba(38,38,38,0),rgba(38,38,38,.2));height:225px;left:0;opacity:0;position:absolute;top:0;transform:rotate(-43deg);transform-origin:0 13px;width:176px"></div>
</div>
<div style="animation:a-ef 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;border-radius:12px;height:100px;left:0;overflow:hidden;position:absolute;top:0;transform:scaleY(1);transform-origin:top;width:176px">
<div style="height:176px;left:0;position:absolute;top:-100px;transform:scaleY(.73)rotate(135deg);width:176px">
<div style="animation:a-s .167s 1.283s 1 linear forwards;box-shadow:-5px 0 12px rgba(0,0,0,.5);height:176px;left:0;opacity:0;position:absolute;top:0;width:176px"></div>
<div style="background:#ddd;height:176px;left:0;overflow:hidden;position:absolute;top:0;width:176px">
<div style="animation:a-nt .667s 1.25s 1 cubic-bezier(.4,0,.2,1) forwards;background:#db4437;border-radius:50%;bottom:41px;height:225px;left:41px;position:absolute;transform:scale(0);width:225px"></div>
<div style="background:#f1f1f1;height:128px;left:24px;position:absolute;top:24px;transform:rotate(90deg);width:128px"></div>
<div style="animation:a-efs 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;background:#fff;height:176px;opacity:0;transform:rotate(90deg);width:176px"></div>
</div>
</div>
</div>
</div>
</div>
<div id="nlpt"></div>
<div style="animation:a-s .25s 1.25s 1 forwards;opacity:0" class="msg">Loading Gmail…</div>
</div>
</div>
This is a jsFiddle that reproduces it.

Open and close modal windows not working

What am trying to do is when a user clicks the ".inner" element it finds the modal window that is inside of it and removes the "slideOutLeft" class if there is one and then adds the "slideInLeft" class and fades in the overlay element. This works fine.
But what doesn't work is when you click the .closeBtn element it doesn't remove the "slideInLeft" and then add the "slideOutLeft" class. But when you click the black overlay behind the modal window it does function properly.
I'm obviously missing something but I can't figure it out.
Here is a fiddle with all my code
$(document).ready(function() {
$('.inner').click(function() {
$(this).find('.modalWindow').removeClass('slideOutLeft').addClass('slideInLeft').css('display', 'block');
$('.overlay').fadeToggle(500);
});
$('.closeBtn, .overlay').click(function() {
$('.modalWindow').removeClass('slideInLeft').addClass('slideOutLeft');
$('.overlay').fadeToggle(500);
});
});
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 50%;
float: left;
text-align: center;
padding: 20px;
}
.modalBtn {
padding: 15px 30px;
border: 1px solid #333;
border-radius: 5px;
text-transform: uppercase;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
z-index: 999997;
display: none;
}
.modalWindow {
width: 80%;
right: 0;
left: 0;
top: 50%;
margin: 0 auto;
height: auto;
position: fixed;
display: none;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 999998;
background-color: white;
padding: 20px;
}
.closeBtn {
font-size: 32px;
color: #333;
position: absolute;
right: 20px;
top: 5px;
}
.inner:hover {
cursor: pointer;
}
/* Animations */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*the animation definition*/
#-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
#keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-125%, 0, 0);
-ms-transform: translate3d(-125%, 0, 0);
transform: translate3d(-125%, 0, 0);
visibility: visible
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
#-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
#keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-125%, 0, 0);
-ms-transform: translate3d(-125%, 0, 0);
transform: translate3d(-125%, 0, 0)
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="overlay" class="overlay"></div>
<div class="wrapper">
<div class="inner">
<div class="modalBtn">click for modal 1</div>
<div class="modalWindow animated">
<div class="closeBtn">X</div>
<span>This is modal window 1</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="inner">
<div class="modalBtn">click for modal 2</div>
<div class="modalWindow animated">
<div class="closeBtn">X</div>
<span>This is modal window 2</span>
</div>
</div>
</div>

Problem is in your html structure, so when you click on close button you are clicking on .inner div, too:
Fix:
$('.closeBtn, .overlay').click(function(e){
e.stopPropagation();
$('.modalWindow').removeClass('slideInLeft').addClass('slideOutLeft');
$('.overlay').fadeToggle(500);
});
Demo: https://jsfiddle.net/ssjfu611/24/

The issue is your <div class="inner"> is still clickable please change your HTML mark up:
<div class="wrapper">
<div class="inner">
<div class="modalBtn">click for modal 1</div>
</div>
//KEEP THIS OUT OF THE INNER DIV
<div class="modalWindow animated">
<div class="closeBtn">X</div>
<span>This is modal window 1</span>
</div>
</div>
Then your JavaScript too:
$('.inner').click(function() {
$(this).parent().find('.modalWindow').removeClass('slideOutLeft').addClass('slideInLeft').css('display', 'block');
$('.overlay').fadeToggle(500);
});