Skip to content

Instantly share code, notes, and snippets.

@danpatil
Created September 16, 2018 15:54
Show Gist options
  • Save danpatil/06c930f8f1b0f2332c99b6012b3e4d05 to your computer and use it in GitHub Desktop.
Save danpatil/06c930f8f1b0f2332c99b6012b3e4d05 to your computer and use it in GitHub Desktop.
jQuery CSS Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<title>jQuery With Dinesh</title>
</head>
<body>
<div class= 'flex'>
<div class= 'container'>
Ohh! You Just Poked Me?
</div>
<div class= 'reveal'>
Click Here To Poke Me.
</div>
</div>
</body>
</html>
$('.container').hide();
$('.reveal').click(function () {
$('.container')
.fadeIn(1000)
.delay(3000)
.fadeOut(1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body{
background : rgba(251, 225, 255, 1);
font-family: 'Varela Round', sans-serif;
}
.container {
background : rgba(255, 133, 172, 1);
padding: 20px 40px;
border-radius: 6px;
color: white;
margin-right: 10px;
margin-top: 100px;
}
.reveal {
background : rgba(255, 133, 172, 1);
padding: 20px 40px;
color: white;
border-radius: 6px;
cursor: pointer;
margin-left: 30%;
margin-top: 100px;
}
.flex {
display: flex;
width: 55%;
margin: 0 auto;
justify-content: space-between;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment