We Keep Coding

Creating multiple instances of the same id

I have a question I can't seem to figure out myself.
Say I have created a paragraph that says "+1". When I click a button that already exists in my code, I can make this paragraph appear above the button and I can transform it so that it's 'y' increases and it moves up while fading slowly.
So, you click the button, a +1 appears above and moves up while fading.
How do I make it so I can create a new instance of this +1 without removing the first one if I click the button before the first one has a chance to disappear?
So, if I clicked the button really fast, a stream of +1's would appear above the button and slowly fade out, one by one. Any idea of how I would go about doing this?
Thank you!!

Here's a solution using jQuery:
$('button').on('click', function() {
var $newPlus = $('<div class="plus">+1</div>');
$('#area').append($newPlus);
setTimeout(function(){ $newPlus.addClass('fade'); }, 50);
setTimeout(function(){ $newPlus.remove(); }, 650);
});
#area {
position: relative;
padding: 70px;
}
#area .plus {
position: absolute;
left: 100px;
top: 50px;
opacity: 1;
transition: top 300ms ease-out, opacity 600ms ease-in-out;
}
#area .plus.fade {
top: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
<button>Plus One</button>
</div>

Javascript - Reversing a Modal Animation

I have a few items on a site I'm building that onclick activate a modal like this.
Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?

#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}
Then in button click event:
$("#modal").addClass("hidden")
On close event:
$("#modal").removeClass("hidden")
If you need pure javascript, it would be a bit more code but essentially that's it

Depending on how you've structured your code, you can approach this in a few ways:
Make use of the animation-direction: reverse; CSS property
Use a Javascript framework (like jQuery) that enables manipulation of DOM elements (with jQuery you could do something like: $('element').slideIn(); to show the modal and $('element').slideOut(); to hide the modal).
Use CSS classes and apply / unapply them with Javascript (the option I'd recommend, and have given an example below):
$(document).ready(function() {
$('.open').on('click', function(e) {
e.preventDefault();
if ($('.modal').hasClass('hide')) {
$('.modal').removeClass('hide');
}
$('.modal').addClass('show');
});
$('.close').on('click', function(e) {
e.preventDefault();
$('.modal').addClass('hide');
if ($('.modal').hasClass('show')) {
$('.modal').removeClass('show');
}
});
});
.modal {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
left: -305px;
z-index: 999;
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid blue;
}
.modal.show {
left: 150px;
}
.modal.hide {
left: -305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click here to open modal</p>
<div class="modal">
<p>This is a modal window.</p>
<p>Click here to close</p>
</div>
Please note that this example is only there to illustrate a proof of concept - you'll need to tidy it yourself :)

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

jQuery fadeIn() not giving the result I want

Site Link
If you scroll down a little you're gonna see some social icons and when hovered they show a simple tooltip that I made in jQuery using fadeIn() on hover() event. So the problem is I want something like in this this page (scroll down a little to see the icons). How can I accomplish such effect using fadeIn or any other jQuery effect?
HTML for one icon:
<div class="col-md-3 col-sm-3 tooltip-toggler">
<a href="#">
<div id="facebookIcon" class="social-round">
<span class="fa fa-facebook"></span>
</div>
</a>
<span class="social-tooltip fb">Facebook</span>
</div>
jQuery:
$(".tooltip-toggler").hover(function(e) {
$(this).children(".social-tooltip").fadeIn(100);
}, function(e) {
$(this).children(".social-tooltip").fadeOut(100);
});
Related CSS:
.tooltip-toggler {
position: relative;
}
.social-tooltip {
display: none;
position: absolute;
top: -45px;
left: -20px;
width: auto;
padding: 10px;
transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
jSFIDDLE ( Please expand the result window wide to see the proper result )

you can use animate
$(".tooltip-toggler").hover(function(e) {
$(".social-tooltip", this).animate({'top':'-45px', 'opacity':1},200)
}, function(e) {
$(".social-tooltip", this).animate({'top':'-100px', 'opacity':0},200)
});
DEMO
UPDATE
Here's link to your jsFiddle

If you want to give just fade-in effect for icons, use the following class.
.social-round:hover
{
opacity:0.7;
}
NOTE: I am not talking about the tool tip here. I am just giving answer based on your reference link.
DEMO

$(".social-round p").mouseenter(function(){
var tooltip = $(this).parents(".tooltip-toggler").find(".social-tooltip");
tooltip.animate({
top: "+=30",
opacity:"1",
}, 0);
});
$(".social-round p").mouseleave(function() {
var tooltip = $(this).parents(".tooltip-toggler").find(".social-tooltip");
tooltip.animate({
top: "-=30",
opacity:"0",
}, 100);
});
Try the above code this may help u to acheive your target and also check the demo
DEMO
Make a thumbs up if this works for u

make a http://www.jsfiddle.net/k8vAv/
pls ..
also in your desired example ether are a lot of css and js involved.<br>
you must animate from a position to other, on hover.
I give you few ex to choose :)
http://jsfiddle.net/dirtyd77/SLGdE/16/
I like more this this
http://jsfiddle.net/4EAnU/16/

$(this).children(".social-tooltip").fadeIn(100); --> $(this).find(".social-tooltip").fadeIn(100);
same as the next one

Calculate the future height of a element

My intent is to animate using CSS3 the transition of height of a element when a child div get expanded.
<div id="container">
<div id="content">
<span>Small Conent</span>
<div id="big">
<p>
This is way bigger content, will be visible after you have clicked the
"Expand" button.
</p>
<p>It should animate up to the correct position.</p>
</div>
</div>
<button id="expand">Expand</button>
</div>
I came up with this hack, using max-height. But there are a couple of problems:
The max-height must have a value
The animation will start and stop according to the max-height given value, so if you insert a crazy value like 2000px the animation will have a great delay.
To better illustrate the problem, I created a Fiddle: http://jsfiddle.net/egDsE/3/
The only way of having a precise animation, is to insert the correct value of max-height.
My intention is to calculate using JavaScript (and JavaScript only) what the height of the parent will be once the child is expanded. But of course, I will need to calculate it before the actual transition takes place.
Is this possible? Only pure JS please.

Actually, you don't need to do all of the that cloning and stuff...just give the element height auto, check the size and set the height back to 0. It'll happen so fast the browser has no chance to repaint.
Now, this works like a charm, but the thing is that setting the height in Javascript immediately afterward will cause the transition to fail. I just throw a 100ms timeout around it and then it works fine.
Javascript:
document.getElementById('expand').addEventListener('click', function () {
var el = document.getElementById('big');
if (!el.className) {
el.className = 'expanded';
document.getElementById('expand').innerHTML = 'Retract';
var elH = getHeight(el);
window.setTimeout(function() {
el.style.height = elH+'px';
}, 100);
} else {
el.className = '';
el.style.height = '0';
document.getElementById('expand').innerHTML = 'Expand';
}
});
function getHeight(el) {
el.style.height = 'auto';
elHeight = el.offsetHeight;
el.style.height = '0';
return elHeight;
}
CSS:
#container {
border: 1px solid gray;
padding: 20px;
}
#big {
overflow: hidden;
height: 0;
transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
}
HTML: no changes to your markup
<div id="container">
<div id="content"> <span>Small Conent</span>
<div id="big">
<p>This is way bigger content, will be visible after you have clicked the "Expand" button.</p>
<p>It should animate up to the correct position.</p>
</div>
</div>
<button id="expand">Expand</button>
</div>
DEMO

I have updated the Fiddle with the solution proposed in the comments by Bartdude, optimizing it for performances as possible.
http://jsfiddle.net/egDsE/5/
var calculateHeight = function(e) {
var outside = document.getElementById('outside');
var clone = e.cloneNode(true);
outside.appendChild(clone);
var elHeight = outside.offsetHeight;
outside.removeChild(clone);
return elHeight;
}
The outside div have very basic css:
#outside {
position: absolute;
top: -1000;
left: -1000;
}
I won't recommend this solution if image are involved, they would slow down the operation significantly.

not to be that guy but I would use LESS if you don't want to be as intensive and get this functionality