Here it is a code pen URL. I want content at the initial position after mouse remove from <div> Rather than one single <div> I have 6 different <div> 3 in one row. The transform should be same on every <div>.
Remove Style Attr
$(".card").on("mouseleave",function(e) {
card.removeAttr('style')
});
LINK
Tried an animated reverting on mouse leave.
http://codepen.io/anon/pen/raQWLO?editors=110
// why it doesn't work on firefox?
var card = $(".card");
$(".card").on("mousemove",function(e) {
var ax = -($(window).innerWidth()/2- e.pageX)/20;
var ay = ($(window).innerHeight()/2- e.pageY)/10;
card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");
});
$(".card").on("mouseleave",function(e) {
card.attr("style", "transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transform: rotateY("+0+"deg) rotateX("+0+"deg);-moz-transform: rotateY("+0+"deg) rotateX("+0+"deg);-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;");
});
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body{
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display",georgia,serif;
}
.card{
//pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0,0,0,.1);
//position: relative;
&:after{
content:" ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left:0;
bottom:-50px;
box-shadow: 0 30px 20px rgba(0,0,0,.3);
}
.card-content{
margin: auto;
text-align:center;
transform-style: preserve-3d;
}
h1{
transform: translateZ(100px);
}
p{
transform: translateZ(50px);
display: block;
&.related{
transform: translateZ(80px);
font-style: italic;
}
}
a{
color:#69c6b8;
pointer-events: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="card-content">
<h1>Just hover around</h1>
<p><small>by Ariona, Rian</small></p>
<p class="related"><strong>See also: </strong>Animated highlight text</p>
</div>
</div>
Related
I'm trying to create a "bubble" which gets bigger in order to change its parent color with a nice animation. I like my approach, but I only need to put it inside the parent div.
This is what I have:
HTML
<html>
<body>
<div class="nav-menu" style="top: -64px;">
<div class="test"></div>
<div class="brand" onclick="test();">
<h1>App</h1>
</div>
<ul class="menu-list">
<li class="menu-item">Item</li>
</ul>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
margin: 0;
padding: 0;
}
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
}
.test {
background-color: blue;
position: absolute;
border-radius: 50%;
z-index: -1;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: scale(0) translate(-50%, -50%);
transform-origin: top left;
transition: transform .25s;
}
.nav-menu .brand h1 {
margin: 0;
padding: 0;
line-height: 64px;
font-family: 'Satisfy', cursive;
}
.nav-menu .menu-list {
list-style: none;
margin: 0;
}
.nav-menu .menu-list a {
display: inline-block;
margin: 0;
padding: 0 16px;
line-height: 64px;
font-size: 21px;
vertical-align: middle;
transition: background-color .2s;
color: white;
text-decoration: none;
}
.nav-menu .menu-list a:hover {
background-color: #D8C292;
}
(And a .js just for testing)
let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });
var showing = false;
function test () {
document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
showing = !showing;
}
Here you have a demo in which you can press the "App" text and it would scale the "bubble" just a little bit. I want to remove the following stuff:
Can anybody give me a hint? However if you know any better solution for this "feature", I will appreciate it.
Thank you in advance!
Adding overflow:hidden property to your navigation div would work. Try this code.
.nav-menu {
z-index: 1000;
padding: 0 16px;
display: flex;
justify-content: space-between;
background-color: #B67171;
color: white;
position: fixed;
width: 100%;
transition: background-color .5s, top .2s;
overflow: hidden;
}
Add to .navmenu property overflow
DOC: overflow
nav-menu {
...
overflow: hidden;
}
Simply add overflow: hidden; to your div with class nav-menu.
Here is your edited example: https://jsfiddle.net/4r1n2cux/2/
use overflow: hidden; in style of first <div>
I have this door open/close script made from HTML, CSS, and JavaScript which I got from here.
My question is how can I disable/prevent from clicking/closing again the same selected door?
For example, I will click the first door it will disable what I clicked and will also disable the remaining doors. I want this because I need to trigger an ajax request after I've clicked on one of the doors.
My javascript code:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});
Demo from codepen:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
/*
// move the overlay
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
*/
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
}
.door img {
width:100%;
height:100%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.swing {
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.swing figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
background-color: brown;
width:80px;
height:130px;
}
.swing .back {
transform: rotateY( 180deg);
}
.swing:hover {
outline:3px solid white;
}
.swing.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
.popover {
position:absolute;
border:1px solid red;
width:200px;
height:200px;
background-color:#fff;
transition: transform .5s;
transition: box-shadow .5s;
transform:scale3d(0,0,0);
}
.popover.open {
transform:scale3d(1,1,1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
<figure class="back"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
</div>
</div>
</section>
<div class="popover">Surprise!</div>
Updated and fixed :
In JQuery you can just use the .off() method on the main to remove the click event.
Ex: $('section.container').off("click");
In pure javascript (vanilla) you can just use the removeEventListener() method.
Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);
You can take a look at my fixed CodePen.
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('section.container').on('click', '.doorFrame', (event) => {
$('section.container').off("click");
let doorFrame = $(event.currentTarget);
doorFrame.find('.swing').toggleClass('flipped');
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.container:after {
content: "";
display: table;
clear: both;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.door:hover {
outline:3px solid white;
}
.door figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
transform: rotateY( 180deg);
}
.door img {
width:100%;
height:100%;
}
.door.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
<figure class="back">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
</div>
</div>
</section>
The simple solution is to just use one
-- edit --
Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications
//edit - using on instead of one
$('.doorFrame').on('click',function(event){
console.log('click');
//edit - removing listener for all doorFrames
$('.doorFrame').off('click', this);
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});
This question already has answers here:
Flip content of a div on clicking a button
(4 answers)
Closed 2 years ago.
I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.
Is there any way to use css animation with javascript?
I want to make multiple cards on a single page, and make them flip when clicked.
If you want the card to toggle the flip on every click try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;
card.addEventListener("click", () => {
if(!flipped) {
cardContent.style.transform = "rotateY(180deg)"
} else {
cardContent.style.transform = "rotateY(0deg)"
}
flipped = !flipped;
});
Or if you want the card to be flipped only once try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
card.addEventListener("click", () => {
cardContent.style.transform = "rotateY(180deg)";
});
As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.
Initially add the id to the div tag where class = "card" like
HTML
<div class="card" id ="card1">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
Here you set the id as card1 and then you must you the following simple JS like
<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>
This is a simple way by which you can achieve what you want.
just change .card:hover .card-content
to .card.flip .card-content
and add js code:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
demo:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Roboto", sans-serif;
background-color: #96cfe1;
}
.container {
padding: 10%;
}
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px #00000080;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flip .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="container">
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
</div>
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.
Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>
If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?
This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.
Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});