Develop Reference

how to add transition animation to this DIV TOGGLE Hid/Show ?

I have this dive the toggle Hide / Show !! ... It works ok , but I would like to know how to add transition animation to the hide/show ?
this is my JS :
function myFunction() {
var x = document.getElementById("clock1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none" ;
}

You cannot animate the display property. But you can animate the visibility or opacity property in css easily:
// main.html
<div id="clock1" class="hidden">...</div>
// main.css
#clock1 {
visibility: visible;
opacity: visible;
transition: visibility 0s, opacity 0.5s linear;
}
#clock1.hidden {
visibility: hidden;
opacity: 0;
}
// main.js
function myFunction() {
var x = document.getElementById("clock1")
if (x.classList.contains('hidden')) {
x.classList.remove('hidden')
} else {
x.classList.add('hidden')
}
}

Setting display to none will immediately hide the element, which means there is not opportunity for animation/transition of visibility over time.
Perhaps you could consider using opacity instead, to achieve this?
Add the following CSS:
#clock1 {
transition:opacity 1s;
}
Update your JS:
function myFunction() {
var x = document.getElementById("clock1");
// Update opacity rather than display
if (x.style.opacity === "0") {
x.style.opacity = 1;
} else {
x.style.opacity = 0;
}
}
Working jsFiddle here

Div appears on page load

I have the following code which applies class which shows/hide a div.
$(document).ready(function($) {
function reusuableUpAnimFunc(elementName, offset, hideClass, showClass) {
$(window).scroll(function() {
$animation = $(elementName);
($(this).scrollTop() > offset) ? $animation.removeClass(hideClass).addClass(showClass):
$animation.addClass(hideClass).removeClass(showClass);
});
}
reusuableUpAnimFunc('#top-btn', 400, 'element-hide', 'element-show');
});
css
.element-hide {
opacity: 0;
visibility: hidden;
}
.element-show {
opacity: 1;
visibility: visible;
}
Problem is when the page first loads the div is visible, then as soon as user scrolls it disappears, then reappears as it's supposed to. I want it to be opacity 0 until the offset distance is reached

You could trigger the scroll callback function on page load with triggerHandler('scroll'). I would write it as follows:
$(document).ready(function($) {
function swapClass(selector, class1, class2, setClass2) {
$(selector).toggleClass(class1, !setClass2).toggleClass(class2, setClass2);
}
function reusuableUpAnimFunc(selector, offset, hideClass, showClass) {
$(window).scroll(function () {
swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
}).triggerHandler('scroll');
}
reusuableUpAnimFunc('#top-btn', 50, 'element-hide', 'element-show');
});
.element-hide {
opacity: 0;
visibility: hidden;
}
.element-show {
opacity: 1;
visibility: visible;
}
p { height: 50px };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>scroll down...<p>
<div id="top-btn">This will appear on scrolling</div>
<p></p><p></p><p></p><p></p><p></p>
Or, you could just call the function explicitly:
// ...
$(window).scroll(function () {
swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
});
// Call it now:
swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
// ...

Adding a css attribute to a class after transitionend

I am doing some animation works with css keyframes.First i need to keep the element's opacity zero then after the animation is end then it would be one(1).I have wrote some jQuery codes and still not works.
Css codes
.slider_img {
position: absolute;
opacity: 0;
left: 24%;
top: 50vh;
animation-name: dropImg;
animation-duration: 2s;
animation-delay: 1s;
transform: translateY(-50%);
}
jQuery
$(window).ready(function() {
$('.slider_img').on("webkitTransitionEnd", function(){
$('.slider_img').css('opacity', 1);
})
});
What sould i do now

Assuming your animation starts when your page loads:
$(document).ready(function() {
var aDuration = parseInt($('.slider_img').css('animation-duration').slice(0, -1)) * 1000;
var aDelay = parseInt($('.slider_img').css('animation-delay').slice(0, -1)) * 1000;
var delay = aDuration + aDelay;
setTimeout(function() {
$('.slider_img').css('opacity', 1);
}, delay);
});
EDIT: Added the delay from animation-delay.

Your problem is that you are using the wrong event transitionend when you should be looking for animationend (plus of course you will need all the prefixes). For example:
$('.slider_img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$('.slider_img').css('opacity', 1);
});

You could do something like:
$(window).ready(function() {
var sliderImg = $('.slider_img'),
delay = sliderImg.css('animation-duration').replace("s","") * 1000;
setTimeout(function(){
sliderImg.css('opacity', 1);
}, delay);
});

How stay final state of animation CSS and remove animation property?

I want to stay with final properties of css animation, but remove animation property itself, exmeple:
#keyframes('foo')
{
0% { opacity: 0; }
to { opacity: 1; }
}
at the begining :
.my_element
{
opacity: 0;
}
I apply animation by Javascript, so I got :
.my_element
{
opacity: 0;
}
element.style
{
animation: foo 1s forwards; #with opacity: 1; at the end.
}
And now I need clean up :
.my_element
{
opacity: 0;
}
element.style
{
opacity: 1;
}
How can I do that?

This does exactly what you're asking. On animationEnd, the cleanUp function is passed an object containing the class to remove after the animation, the property to replace on the element, and the property value to replace on the element. Check out the DOM before and after clicking button the and you'll see that this works properly.
var el = document.querySelector(".my_element"),
cleanUp = function(data) {
el.classList.remove(data.remove);
el.style[data.prop] = data.val;
},
startAnimation = function() {
el.classList.add("animate");
};
el.addEventListener("animationend", function() {
var cleanup_data = {
remove: "animate",
prop: "opacity",
val: 1
};
cleanUp(cleanup_data);
});
#keyframes foo {
from { opacity: 0; }
to { opacity: 1; }
}
.animate {
animation: foo 3s forwards;
}
.my_element {
opacity: 0;
}
<div class="my_element">some text</div>
<button onclick="startAnimation()">Start Animation</button>

How to solve , Even loop delay (not real time) When fast hover `in, out , in , out , in, out , in , out`?

How to solve , Even loop delay (not real time) When fast hover in, out , in , out , in, out , in , out ?
When i fast hover in , out , in , out , in , out , in , out , in , out , in , out , in , out
Even will show loop delay.
I want to set even to, if i fast hover in , out , in , out , in , out , in , out , in , out , in , out , in , out Do not show even loop delay
FIDDLE
$(document).ready(function(){
$("#111").hover(
function(){
var id = $(this).data("id");
if(id!==undefined){
$("#" + id).show();
}
$(".outer").animate({top: '13px' , opacity: 1}, 100);
$(".inner").animate({top: '47px' , opacity: 1},100);
},function(){
$(".outer").animate({top: '25px' , opacity: 0}, 100);
$(".inner").animate({top: '37px' , opacity: 0},100);
});
});
you can see for example in http://www.fiverr.com/ , when you mouseover image heart it's will show real element not even loop .

You can stop() any existing animations before queuing more:
$(document).ready(function() {
$("#111").hover(
function() {
var id = $(this).data("id");
if (id) {
$("#" + id).show();
}
$(".outer").stop().animate({top: '13px', opacity: 1}, 100);
$(".inner").stop().animate({top: '47px', opacity: 1}, 100);
}, function() {
$(".outer").stop().animate({top: '25px', opacity: 0}, 100);
$(".inner").stop().animate({top: '37px', opacity: 0}, 100);
});
});
If you can use them, though, CSS transitions might be more appropriate. For example, if .inner and .outer are children of #111:
#111 .outer {
/* … */
opacity: 0;
position: relative;
top: 25px;
transition: all 0.1s ease;
}
#111 .inner {
/* … */
opacity: 0;
position: relative;
top: 37px;
transition: all 0.1s ease;
}
#111:hover .outer {
opacity: 1;
top: 13px;
}
#111:hover .inner {
opacity: 1;
top: 47px;
}