Creating multiple instances of the same id - javascript

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>

Related

How can I animate an element from a static layout position to an absolute layout position?

I have a form and inside this form a button. Initially the button is statically positioned at its default position based on usual layout. On an event (in the example below, button click) I want to move it to the center of the form through animation and during this animation doing a horizontal flip (using scale transform) and when the animation is in the middle (when the rendered width is 0) changing the contents of the button to a paragraph that once loaded will show an animation probably done with svg and a link.
This snippet does a part of what I want (everything until the second part of the flip with changing the contents and resizing the button to be bigger), but without an initial static position from which to start the animation:
var form = $("form")
var button = $("button")
button.on("click", function(){
var x = (form.outerWidth() - button.outerWidth()) / 2;
var y = (form.outerHeight() - button.outerHeight()) / 2;
button.css({
transform: `translateX(${x}px) translateY(${y}px) scaleX(0)`
});
})
form {
background: #aaa;
border-radius: 4px;
padding: 20px;
font-size: 25px;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
position: relative;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: absolute;
left: 0;
top: 0;
transition: transform 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<p>Hello World</p>
<button onclick="return false;">Do something</button>
</form>
(https://jsfiddle.net/silviubogan/L1ogpf6a/)
How can I achieve what I want in the most correct manner? Please note that the rest of the form should remain in place.
Thank you.
There's two ways you can do this. First is using setTimeout (reference) with 1000ms as a parameter, since your css animation lasts 1 second, and a callback function that displays the SVG. The second is using jQuery animate (reference) instead of css, and using the parameter complete to show your SVG. Since you are already using css for the animation, let's go with the first option:
button.on("click", function(){
// hide button
window.setTimeout(transform2, 1000);
})
function transform2() {
// change contents
// resize button
}
Example fiddle: https://jsfiddle.net/eynL91qu/

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>

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

jQuery know first transition has been done then make the 2nd one

In Jquery I am doing a small animation. In that I have taken two divs. So basically the logic is like this when mouse will be hovered it will show one hidden div with transition. The same concept goes for the 2nd div. But my problem is when I am doing hover on 1st div its showing the hidden div in transition. But when I am doing hover on another div the first hidden is hiding and the 2nd hidden div is showing in the 2nd div. So I want that when I will hover on the 2nd div then the 1st hidden div should hide first then the 2nd hidden div will be shown.
Here is my code so far
<div id="wrapper">
<div class="courses-method-left-wrapper">
<div class="courses-method-wrap left">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p>
</div>
<div class="online-course-price-wrap">
<h3>Left content wrap</h3>
<h6>Left content text</h6>
</div>
</div>
<div class="courses-method-right-wrapper">
<div class="courses-method-wrap right">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p>
</div>
<div class="offline-course-price-wrap">
<h3>Right content wrap</h3>
<h6>Right content text</h6>
</div>
</div>
</div>
My css so far
#wrapper {
width: 100%;
clear: both;
overflow: hidden;
background: #D7DFE6;
position: relative;
}
.courses-method-left-wrapper, .courses-method-right-wrapper {
width: 45%;
padding: 10px;
overflow: hidden;
float: left;
position: relative;
}
.courses-method-wrap.left {
float: left;
position: relative;
left: 0px;
}
.courses-method-wrap.right {
position: relative;
}
.online-course-price-wrap {
width: 230px;
background: #1C2C39;
position: absolute;
right: -230px;
height: 200px;
}
.offline-course-price-wrap {
left: -200px;
z-index: 0;
width: 200px;
position: absolute;
height: 100%;
top: 0px;
background: #ccc;
height: 200px;
}
.hovered .online-course-price-wrap { right: 0px; }
.hovered .offline-course-price-wrap { left: 0px; }
#wrapper * {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
}
and js code is like this
jQuery('body').on('hover','.courses-method-left-wrapper, .courses-method-right-wrapper', function(){
jQuery(this).toggleClass('hovered');
});
Here is the fiddle link
So can some one tell me how to make one transition complete after that another should be start or How can I check the first animation has been done so that the 2nd will be start? Any help and suggestions will be really appreciable. Thanks
A quick solution to your problem would be to use a delay of 700ms to match the 0.7s in your transition like so:
jQuery(this).toggleClass('hovered', function(){
setTimeout(function(){
alert('done');
}, 700);
});
http://jsfiddle.net/aym037ge/2/
This is not an elegant solution, but one nonetheless.
The other option would be to use the transition events as mentioned before and here:
Callback on CSS transition
You can take advantage of the transitioned event with jQuery, to capture when the transition has ended.
jQuery('.courses-method-left-wrapper').mouseenter(function ()
{
//If the previous div is already hovered...
if($('.courses-method-right-wrapper').hasClass('hovered'))
{
$('.courses-method-right-wrapper').removeClass('hovered');
$('.courses-method-right-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
$('.courses-method-left-wrapper').addClass('hovered');
});
}
else // The previous div isn't hovered (i.e. on page load...)
{
$('.courses-method-left-wrapper').addClass('hovered');
}
});
jQuery('.courses-method-right-wrapper').mouseenter(function ()
{
//If the previous div is already hovered...
if($('.courses-method-left-wrapper').hasClass('hovered'))
{
$('.courses-method-left-wrapper').removeClass('hovered');
$('.courses-method-left-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
$('.courses-method-right-wrapper').addClass('hovered');
});
}
else // The previous div isn't hovered (i.e. on page load...)
{
$('.courses-method-right-wrapper').addClass('hovered');
}
});
Vendor prefixes added for full compatibility, including two for Opera
You can see the code in action in this fiddle I prepared. It can be improved (if you move the mouse too much, the two hidden divs may show up until you hover again) but it should give you a nice head-start.

Categories