We Keep Coding

Requirements for content widget which reveals only when triggered by mouse click. Troubled on requirements of JS or if CSS can perform this

I am building a module for a website that displays mostly text information for different subjects and categories, and within each module will be a function that, when triggered by mouse click, reveals a citation/source reference collection for the subject. I have located an existing service, known as graphiq.com, that is very very close to what I am building. I am presenting graphiq's embeddable data module as an example.
Their embedabble module contains a subject (in my example, an Orca) and presents primarily descriptive text about the animal.
The function that I am specifically asking for help on is the "Show Details" element contained in the lower portion of the module. It is a clickable link that when triggered by mouse, reveals with a brief animation a new portion of text that contains the references to sources, and other additional text information relevant for citation and source confirmation.
Here is a before and after screenshot of the graphiq.com module.
http://imgur.com/x5TvAI2
And here is the actual module.
https://www.graphiq.com/vlp/k0i6yt5ld9X
My diligence so far informs me that for certain there is CSS class named dsrc dsrc-expand-overlay that has the following transform code
.dsrc-expand-overlay {
-webkit-transition: -webkit-transform .35s ease;
transition: -webkit-transform .35s ease;
transition: transform .35s ease;
transition: transform .35s ease,-webkit-transform .35s ease;
transition-property: transform, -webkit-transform;
transition-duration: 0.35s, 0.35s;
transition-timing-function: ease, ease;
transition-delay: initial, initial;
background-color: white;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-top: 1px #e1e1e1 solid;
bottom: 0;
left: 0;
right: 0;
z-index: 550;
position: absolute;
display: block;
}
However, I believe it is also calling upon JavaScript as when I inspect the Event Listener Breakpoints in Chrome Dev Tools, and I click that "Show Details" text, I am informed of the jquery.min.js file firing at the line that contains this instruction:
return function() {
b && (delete Dc[g],
b = f.onload = f.onerror = null,
"abort" === a ? f.abort() : "error" === a ? d(f.status, f.statusText) :
d(Ec[f.status] || f.status, f.statusText, "string" == typeof
f.responseText? {
text: f.responseText } : void 0, f.getAllResponseHeaders()))
}
}
I have been unable to reproduce the animated reveal effect in my own experiments using that CSS code, and am stuck as I am very new to JavaScript which means I may be mis-diagnosing the failure to not capturing this functions proper JavaScript in its entirety.
I have created a JSFiddle with the graphiq.com orca module that I just pulled code using Chrome Dev Tools, that is broken, to share for further clarity.
http://jsfiddle.net/apsfgcz0/

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

Drawer menu performances

I'm developing a side menu for my web-application (in the mobile version) using Angular2.
This the class when the menu is closed
.main-drawer
{
left: -300px;
width: 300px;
max-width: 100%;
z-index: 2;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
When the user press the open-menu button I add the following class using jQuery
.main-drawer.opened
{
left:0;
transition-property: left;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
This is the js code:
let drawer = jQuery ('.main-drawer');
drawer.toggleClass ('opened', !drawer.hasClass ('opened'));
Using this code on desktop computers the performances are good, but on mobile version it is laggy.
Is there a way to increase per performance?
The menu is pretty lightweight, does not contain a lot of nodes.
I noticed that other websites have pretty good performances even if their menu is full of things.
Thanks a lot

Translating x/y is more performant than transitioning or animation top/left, because translation leans on the GPU for rendering, which is powerful and makes movement smooth. top and left are operating at a DOM level, which is restrictive.
Also, you can shorten things a little. You can define your transition in one place on your initial element and then just define only what's changing in the added class. Try this:
.main-drawer
{
transform: translateX(-300px);
width: 300px;
max-width: 100%;
z-index: 2;
transition: 300ms transform ease-out;
}
.main-drawer.opened
{
transform: translateX(0);
}

What causes div elements to move when hovering over one element?

So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.
css:
.facebookIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-facebook-circled:hover{
color: #3b5998;
font-size: 90px;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.twitterIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-twitter-circled:hover {
font-size: 90px;
color: #00aced;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}
html:
<section id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>

There could be a number of factors, the most obvious would be in your CSS having a :hover set on the element to increase a font-size or change something which would affect its position or size.
We would need to see code to be sure and verify thats the problem.
EDIT
So looking through your code, i can see one major flaw. As i guessed the :hover was affecting the placement.
Your setting the font-size to be 80px and then on the hover, upping that to be 90px. That will then increase the size the container needs to be. Unless you set a max-height/width on the element or set the overflow to hidden it will always increase in size when you modify something that will increase in size, even by a single pixel.
Its hard to try and amend the code for you without seeing the full code (the piece you added was only a snippet) and also needing to know how it looks.
If you could get it into a jsFiddle then i could try fix it up but its best to learn yourself where your going wrong and then how to fix it yourself.
Hope this all makes sense to you.

Your elements are most likely wired up with a mouse over effect that changes the border around each element. Hovering over the element will change the dimensions of the element. Since they are all floated they will move around as best they could to accommodate the altered element.

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.