We Keep Coding

add transparency on hover on a div but with time delay

I want my div to become partially transparent 1 second after I hover cursor on it. When no longer hovering I want it to return to its default full opacity immediately without any time delay.
I know very very javascript so I don't know how to do this.
Any help much appreciated thanks in advance

Actually, you shouldn't use js in this case. CSS Transitions would be better, cause they are smoother and more efficient than js/jQuery animations.
Below you have example with 2 seconds delay on hover.
.btn{
display: inline-block;
padding: 5px 10px;
background: rgba(0,0,0,1);
color: #fff;
text-decoration: none;
-webkit-transition: background 0.5s ease 0s;
transition: background 0.5s ease 0s;
}
.btn:hover{
-webkit-transition: background 0.5s ease 2s;
transition: background 0.5s ease 2s;
background: rgba(0,0,0,0.5);
}
Text

Javascript Make div appear from top to bottom

I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?

It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});

If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!

Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example

It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}

Why does my Pin It button "scroll/flip" when hovered over?

Refer to this page for example: http://blog.froy.com/bond-street-loft-by-axis-mundi/
Hovering over any of the Pin It buttons, whether an image or in the bottom of the post, causes the button to 'scroll/flip' instead of showing a static Pin It button image.
I can't even identify what the cause is... Does anyone have any experience with this? This occurs in Chrome and Firefox. Site is running off of Wordpress.

It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this
media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.
a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}
Now on the :hover notice where the background position is.
a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}
That change is what is causing the effect.

How get dimension of HTML shadow element via JavaScript

I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/

This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.

JS,CSS,jQuery DIV 3D effect

I'm looking for one specific effect but I'm not sure what's it called or how should I search for it.
Basically, I'm after a 3D effect.
I have a DIV element, I'd like it to behave like it's placed on a ball (which is located below the center of it).
So when you mouse over the edges that edge will zoom out/in.
Has anyone seen anything like it? Is this achievable at all?
Edit:
Behaviour in this example best describes what I was after but with DIVs not text.
I think I'll be able to adjust this example for my needs.
Sorry if my description was too general, I wasn't sure how to describe what I needed.

You can use CSS Transition for this.
with css transition you can animate divs or objects.
Look at this great tutorial
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
an example:
JSFIDDLE
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>
</body>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
Hope it is what you mean.