We Keep Coding

Simple fadein not running smooth

I am a beginner in jQuery and JS and I wanted to make a simple fade in animation using the following code. Unfortunately the code is not running smooth, and despite reading up all the basics (at least I suppose so) I cannot get it to run smoothly. Can anyone point me in the correct direction on how to make a smooth fade in animation?
All my elements are visible in the beginning. I don't want to start with hidden elements as this could result in problems in my UI if there is no JS enabled.
Thank you.
$(function () {
$("#center_block").animate(
{
opacity: 0,
}, 0, function () {
$("#center_block").animate({
opacity: 1,
}, 250);
});
});

If you have a slow processor on your computer or if you are viewing javascript animations a mobile device the processor might not be able to cope with the animation. If you use CSS3 animations then the inbuilt browsers hardware acceleration is used, which is a lot more efficient.
All I am doing is using CSS3 animation to apply the fade.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity:1;
}
}
#center_block {
animation: 1s ease-out fadeIn;
}
<div id="center_block">Look at me, I'm Mr Center Block</div>

There really is no need for JavaScript at all here. CSS animations can do this more easily with better performance (because they will leverage GPU hardware acceleration):
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<span>Hello</span>
Or, if you don't want the animation to be automatic and have some sort of trigger, then just add a CSS class to the object at the right time:
document.querySelector("button").addEventListener("click", function(){
document.querySelector("span").classList.add("animate");
});
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
}
.animate {
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button>Click to Start</button>
<span>Hello</span>

I would advise using CSS animations as much as possible for the smoothest performance. A great library to get you started is animate.css. To use it, include the css library in your project and use javascript to add predefined classes to your components. In your case:
$('#center_block').addClass('animated fadeIn');
would fade in the #center_block element nicely.

If you don't want to hide the elements incase JS is disabled, then you need to hide them first using JS. Also, you're currently using 250ms, which is incredibly fast, and unlikely to be perceived by users.
$(document).on('ready', function(){
$('#center_block').hide().fadeIn(250);
});
If your elements already have opacity: 0; for the CSS, then you can add a transition to handle the animation:
#center_block{
opacity: 0;
transition: all .25s linear;
}
Then change the CSS value of opacity whenever the triggering condition is met:
$('#center_block').css('opacity','1');

Controlling horizontal scrolling when using waypoints.js

I am building a custom wizard form with waypoints. Something interesting is happening and I can't figure it out for the life of me.
My sample CODEPEN is showing 2 pages of the wizard process to show you what I mean.
When you hit the forward action button (search in the first page of the wizard), the waypoints slide from the right and the next page or screen shows. That would repeat on-forward and backwards if I click on the backward action button. That is working.
The problem I see is with the initial horizontal scrollbar. It shows on page load, which it's a problem because the user could just scroll to the next screen by dragging the scrollbar. I thought of giving it an overflow-x but it didn't fix the issue. The interesting thing is, if I click on the search button and the waypoint slides, the scroll bar disappears and gives me the desired effect! What gives?
I built the CODEPEN as close as possible to the real environment so that you guys can catch any conflict with other elements instead of isolating the problem.
Here is the related code just in case:
HTML:
<div id="content" class="content">
<div class="row page">
<!-- First page content here -->
</div>
<div class="row page2">
<!-- Second page content here -->
</div>
</div>
CSS:
.page, .page2 {
position: absolute;
top: 20px;
left: 10px;
width: 100%;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s
}
.page {
-webkit-transform: translateX(0%);
transform: translateX(0%)
}
.show-page2 .page {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.page2 {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
.show-page2 .page2 {
-webkit-transform: translateX(0%);
transform: translateX(0%)
}
JS:
(function () {
var body = $('#content'),
nav = $('.btn-waypoint'),
panels = $('#content');
nav.on('click', function (e) {
e.preventDefault();
var dest = $(this).data('panel-link');
body
.removeClass(function (index, css) {
// remove only classes start with show-
// http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
return (css.match(/\bshow-\S+/g) || []).join(' ');
})
.addClass('show-' + dest);
});
}());
The closest fix I've tried to solve this is making page2 display:none on page load to eliminate the scrollbar and then making it visible on button click. That almost did it except a funky look happens between the waypoint sliding effect and the css fade effect. Here is the code for that:
JS
$( document ).ready(function() {
$('.page2').css('display', 'none');
$('[data-panel-link]').on('click', function(){
$('.page2').css('display', 'block');
});
});
Here is the link to my CODEPEN
Thanks in advance!

As it plays out the root of the problem is the hard positioning. The waypoint divs are natively in vertical position which they would obviously not produce a horizontal scrollbar. They are being forced to be side by side by position:absolute and the transform: translateX(-100%) and this creates the horizontal scrollbar. If the mousewheel is disabled via jQuery the scrollbar goes away, but it goes away vertically as well. So instead of fighting that battle, a better alternative is to use a different transition that looks good but doesn't require a side by side animation. A fade will do just nice:
Simply replace the css effects from translateX to the following:
.page, .page2{
position: absolute;
width:100%;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.page {
opacity: 1;
}
.show-page2 .page {
opacity: 0;
}
.page2{
opacity: 0;
}
.show-page2 .page2{
opacity: 1;
}

How can I create a "game over" image zoom into the screen using HTML & Javascript?

I am currently developing a HTML game for one of my programming classes and I want to add a "game over" screen that will display an image and information on their score before dying.
What I would like to happen is for the image to overlay the body of the page and start small in the middle of the screen and "expand" or zoom into the screen to a specific size. I'm not sure if that's clear but here is what I'm sort of looking for:
But I would like it to zoom in rather than just appear. Any links or help would be greatly appreciated because I don't even know what to search on google to get information on this!
Thanks in advance for any help!

It's really rough but you can do something like this:
JS
var $foo = $('#foo');
grow = function (size) {
if (size < 50) {
console.log(size);
$foo.css('width', size + '%');
$foo.css('height', size + '%');
size++;
setTimeout(grow, 10, size);
}
}
grow(0);
CSS
#foo {
position: fixed;
right: 0;
left: 0;
top:0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
width: 0%;
height: 0%;
background-color: red;
}
https://jsfiddle.net/a05s1a44/
Change the timeout length to control the speed. Adjust the CSS as needed. Scale the size variable for the dimensions of your box. Change the limit. Do whatever. Should be enough to get you going.

FIDDLE: https://jsfiddle.net/shfv0b3f/
Using transform: scale and transition:
div {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
On game over:
div.zoom {
transform: scale(1);
}

This is what I have made for you and I hope it would help.
basically in a container which it may be the window of your game, I have added the "game over" container you want to show.
The rest of the html is just so you see some false content inside game container:
<div class="container">
<div class="stuff">and here is stuff</div>
<div class="stuff">etc, ect, ect</div>
<div class="stuff">more text</div>
<div class="stuff">and more</div>
<div class="button">Click here</div>
<div class="this-is-your-game-over"></div>
</div>
You can see there's also a class called button that I have used as to trigger the "game over" container zoom effect. In your game development you may use something else to do it.
Then, basically, you will have a "game over" container positioned as this:
.this-is-your-game-over {
position:absolute;
height:0px;
width:0px;
background-color:blue;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
so It is always centered and by jquery:
$(document).ready(function () {
$('.button').click(function () {
$('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");
});
});
When you click on button you add another class to the "game over" container that will make it grow to your desire size with a simple transition:
.this-is-your-game-over-ADDED {
height:80%;
width:50%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
This is the FIDDLE to see verything in action
important: If in your html the this-is-your-game-over div is not at the end of your html you may need to add a positive z-indexto it.

This is perfect use case for CSS transitions and transforms.
Very basically:
#image {
transition: all 0.5s;
}
#image.hidden {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
Then you just toggle the .hidden class somehow, probably by JS.
Also, don't forget to add vendor prefixes (or use Autoprefixer).
See http://codepen.io/anon/pen/waaMvM for better example.

Show an image from b&w to color as if it were loading (left to right)

I don't know how to make clearer the title of the question.
I have an effect where it shows a text with grey color and with keyframes in css the characters become black with the animate css property.
I wonder how could I acomplish that effect but with an image, transitioning from b&w to color from the left to the right.
This is the code:
<div class="modal">
<h1 id="testid" data-content="THIS IS A TEST">THIS IS A TEST</h1>
</div>
And the CSS:
#-webkit-keyframes loading{
from{max-width:0}
}
#-moz-keyframes loading{
from{max-width:0}
}
#-o-keyframes loading{
from{max-width:0}
}
#keyframes loading{
from{max-width:0}
}
.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}
.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}
.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}
The code running here: http://jsfiddle.net/5Vmnn/
Thank you

Maybe you were thinking of something like this?
Fiddle
It's not greyscale, but it provides a similar effect.
EDIT: Here's a version for Webkit with greyscale using -webkit-filter (still right-to-left...)
I've changed your overlay to use opacity, but the principle is the same:
.modal {
opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
width: 100%;
height: 100%;
}

I would make an animated GIF which I think is far easier.
Make 5-10 images each a varying amount b&w and colour and then use ImageMagick to make an animated GIF out of them with a single line like this:
convert -delay 20 -loop 0 *.jpg animated.gif
You may want loop=1 for a single loop, whereas I have it set to zero for infinite looping in the example.
View animated GIF here
In case you are not familiar with Photoshop, I added a Hue Saturation layer and cranked the Saturation down to zero making a black and white image. Then I pressed G for Gradient Tool and drew a horizontal line across the image to specify where the transition is from B&W to colour whilst holding the Shift key to ensure it was horizontal. Then saved it as a 1.jpg and redrew the gradient in a different place and saved it again as 2.jpg and so on.

how to change div background-color with fadeIn/Out?

How to change div background-color with fadeIn/Out,I only want to fade background color,not background image,Please give me some useful code or solution

Although only supported by modern browsers you might also consider using CSS transitions to achieve the same effect
HTML
<div class='foobar'></div>
CSS
.foobar {
/* transition properties */
transition: background-color 2s;
-moz-transition: background-color 2s;
-webkit-transition: background-color 2s;
-o-transition: background-color 2s;
/* basic styling & initial background-color */
background-color:maroon;
width:100px;
height:100px;
}
/* Change background color on mouse over */
.foobar:hover {
background-color:blue;
}
Working example here, http://jsfiddle.net/eRW57/14/

<script>
$(document).ready(function(){
$("p").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>
try it.. that should work fine

You can't fade just the background (color or otherwise) of an element using jQuery's fadeIn/fadeOut.
What you can do is place an additional layer (DIV, etc) with your background color and fade in/out on that.
Instead of something like this:
<div id="my-background"></div>
Use this structure:
<div id="container">
<div id="my-background"></div>
</div>
CSS
#container
{
position:relative;
width:200px;
height:100px;
background-image:url(my-background-image.jpg);
}
#my-background
{
height:100%;
width:100%;
background-color:blue;
position:absolute;
z-index:99;
}
Then use jQuery's fadeIn/fadeOut methods
JS
jQuery("#my-background").fadeOut();

with this you can fadeout all div's with id #my-background
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});