We Keep Coding

Animation not easing

i have some problem with my transitioning. here is the javascript/jquery
function moveProgressBar(v, a) {
var getPercent = v / 100;
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = a;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength, function(){
if (getPercent === 1) {
$('.progress').css('height','auto');
$('.progress_checkout').text('Proceed to checkout!');
} else {
$('.progress').css('height','2rem');
$('.progress_checkout').text('');
}
});
}
.progress_checkout{
text-align: center;
margin: auto 0;
display: block;
color: #fff;
font-weight: bold;
padding: 2rem 0;
transition: ease-in-out 0.6s;
font-size: 200%;
}
.progress_checkout:hover{
background-color: white;
color: #C6DA80;
cursor: pointer;
}
.progress {
width: 100%;
height: 2rem;
}
.progress-wrap {
background: #C6DA80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #F5F5F5;
left: 0;
position: absolute;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap progress" data-progress-percent="0">
<a class="progress progress_checkout"></a>
<div class="progress-bar progress"></div>
</div>
What i want to do is that when this progress bar is full display the text and make the bar bigger. It does that but the animation is instant instead of over 0.5s or so. I have tried it with addClass and removeClass and it does exactly the same. I've even added transition on ever element that it has possible contact with and it will still be instant.
NOTE: If something seems missing please let me know because i might
have not pasted all the code. Though as far as I'm concerned this
should be everything related too the animations

jQuery's animate uses it's own easing parameter. Unfortunately, only swing and linear are available
The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
Documentation.
You have two options.
The first is CSS3 Animations, with which you can time and combine multiple animations. So I would suggest switching back to classes and using CSS.
The second is using jQuery UI, which has the following list of easing options:
linear
swing
_default
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
What you choose or prefer is up to you.

Thanks for the help but this ended up being my fix. Using opacity and having the a tag contain " " avoided the sudden jump from the text insert making the transition smooth.
if (getPercent === 1) {
$('.progress').animate({height: "4rem"}, 1000);
$('.progress_checkout').text('Proceed to checkout!');
$('.progress_checkout').animate({opacity: 1}, 800);
} else {
$('.progress').animate({height: "2rem"}, 1000);
$('.progress_checkout').text(' ');
$('.progress_checkout').animate({opacity: 0}, 800);
}

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>

How to stop a CSS animation when it meets the screen edge?

I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.

If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>

You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}

Can you fix a div and make it change opacity, size and position as you scroll with CSS3

I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible.
The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.
Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3.
Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.
Here's a fiddle of what I have so far. Haven't started on scrolling yet:
HTML
<div id="stuff">Blahblah</div>
CSS
div {
width:250px;
height:250px;
border:2px solid #a1a1a1;
}
JavaScript
$( "#stuff" ).click(function() {
$( "#stuff" ).animate({
width: "20%",
height:"20px",
opacity: 0.4
}, 1500 );
});
http://jsfiddle.net/thed0ctor/1kx5jg1e/

You could do this easily with a combination of CSS3 transform and a bit of Javascript / jQuery:
Demo Fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/
Relevant CSS:
#hanger {
width: 200px; height: 200px;
background-color: #00f;
position: fixed; /* Position fixed important */
top: 10px; right: 10px;
opacity: 1;
transition: 0.5s all; /* Animate transitions */
}
#hanger.dim { /* Style to make it appear dimmed */
transform: scale(.75); /* Make it smaller */
opacity: 0.5; /* Make it dimmer */
}
#hanger.dim:hover { /* To change back on hover only when it is dimmed */
transform: scale(1); /* Back to original size */
opacity: 1; /* Back to original opacity */
}
Relevant jQuery Code:
$(window).on("scroll", function() { /* When window scrolls, */
if ($(window).scrollTop() > 50) { /* Check if it scrolls more than 50 pixels */
$("#hanger").addClass("dim"); /* Apply class dim */
} else {
$("#hanger").removeClass("dim"); /* Otherwise remove class dim */
}
});
Hope that helps.
.

Pseudo code only:
window.scroll(function(){
if (window.scrolltop > selectedElement.offset().top){
selectedElement.animate({
transform: scale(.75),
opacity: .5
position: fixed
});
}else{
selectElement.animate({
transform: scale(.75),
opacity: 1
position: static
});
}
});
The links provided in the he pseudo code should point you in the right direction.

How to get this kind of web page effect

The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.

Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.

You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal

This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.

It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;

You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals