We Keep Coding

How to animate border using vanilla javascript or css

I set border-bottom color to grey and add transiton to .3s, and ':hover' effect,so on hover it changes its color to blue. Problem is related with that: when I place my mouse over the element with hover effect the border i set(blue) emerges from top to bottom(falling effect).
this is it
Now my client wants border to emerge from left to right on hover and border shouldn't fade away on hover on another list item,it(border) have to 'lag behind' the cursor trying to 'catch on' the cursor and fill the next list item's border positon. I hope I you get what I want. I know that it's not possible to do in css,but i don't know how to do this in js,can someone help me with that and expalain to me what to do,without using any frameworks like jQuery.

You can animate by using the width property as Thusitha said.
Here I have attached the codepen link for that effect.
ul {
list-style-type: none;
border-bottom: 5px solid #eee;
}
ul li {
display: inline-block;
position: relative;
padding: 20px;
}
ul li:before {
content: "";
position: absolute;
height: 5px;
width: 0px;
bottom: -5px;
left: 0;
background: blue;
transition: all linear 0.25s;
}
/* Expanding Animation Element */
ul li:hover:before {
width: 100%
}
<div class="box">
<ul>
<li>Homepage</li>
<li>Style Demo</li>
</ul>
</div>

Have an Image Center in the Global Window / Viewport when clicked (JS or CSS)

I'd like to have it when I click an image that it centers in the viewport (like a lightbox effect).
I've set up a pen here http://codepen.io/emilychews/pen/OpXKGd and tried work out the best way to do this but I seem to have hit a wall.
I've included multiple elements in the demo because I'd like it so it uses the window as it's centering container, not just the parent element. I'll be using this on a wordpress site so saying just add a wrapper isn't viable for me.
Also if you look at the demo, at the moment the elements scale up smoothly and i'd like to have it align centrally in the window object as part of the transition when it scales up.
I appreciate this may only be possible with JS / jQuery and i have included some in my example.
My code for quick reference is:
HTML
<div class="wrapper">
<div class="holder image1">Image 1</div>
<div class="holder image2">Image 2</div>
<div class="holder image3">Image 3</div>
<div class="holder image4">Image 4</div>
<div class="holder image5">Image 5</div>
</div>
CSS:
.holder {
width: 20vw;
height: 400px;
background: red;
position: relative;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
}
// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY
.fullsize {
background: blue;
z-index: 2;
position: relative;
transform: scale(1.75);
transform-origin: center center;
transition: all .75s ease-out;
}
jQuery:
$(document).ready (function(){
$('.holder').click(function() {
$( this ).toggleClass('fullsize');
$( this ).css('z-index', '+=1');
});
});
Any help / solution would be amazing.
Emily :)

I believe what you're looking for is to set a left property on the full size image. Note that you will also need to use position: absolute in order to offset each element by the same amount (centralising them).
.fullsize {
position: absolute;
left: 40vw;
}
I've created an updated CodePen showcasing this here.
Note that you also may want to give them a higher z-index, as the .fullsize elements are sometimes obscured behind the regular images.
Hope this helps! :)

Try this. It's a little jumpy and needs some fiddling, but it gives you what you want.
Change .holder to:
.holder {
width: 20vw;
height: 100px;
background: red;
position: static;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
z-index:0;
transform-origin: top left;
}
Change .fullsize to:
.holder.fullsize {
background: blue;
z-index: 200;
transform: scale(1.75);
transition: all .75s ease-out;
position:absolute;
}
and change your JQuery to
$(document).ready (function(){
$('.holder').click(function() {
var $scaleFactor = 1.75;
$( this ).toggleClass('fullsize');
var $winWidth = $(window).width();
var $myWidth = $(this).width();
var $newWidth = $myWidth*$scaleFactor;
var $left = $winWidth/2-$newWidth/2;
$(".holder").text($left);
$(this).animate({
left:$left+"px"
},200);
});
});
Setting the scaling in the JQuery instead might give you a smoother transition.

jQuery, CSS: Animating following DOM Elements after display: none

One quick question.If I set a div to display: none, the following Elements in the DOM will jump up on the place where the div was.How can I animate that jump, that it just moves gently up?Thnaks in advance for each help!

You cannot. Instead of display: none; make it with height: 0; and transition: height .5s; overflow: hidden;
Then you will have slightly move of other divs next to others. :)
If you wanna, I can made a simple codepen.

Use slideUp() instead of hide(); if you use jquery
$('.hidden').slideUp();

Just animate it. jQuery has many ways of doing it, e.g:
$('#myDiv').hide(200); // 200ms

To avoid to keep an hidden element with a width that could interfere with other elements on the page, you should simply:
$('yourElement').slideUp();
That way you will make the yourElement height animate and, finally, get it hidden actually removing it from the elements flow.
Edit:
Thanks A. Wolff for the comment. Removed un-needed .hide() function after .slideUp().

Got even a better solution for you. You can show and hide the blue box with every time you click on the pink box.
$('.pinkBox').click(function() {
$('.pinkBox').addClass('show');
$('.blueBox').addClass('displayed');
});
$('.blueBox').click(function() {
$('.pinkBox').removeClass('show');
setTimeout(function() {
$('.blueBox').removeClass('displayed');
}, 300);
});
.blueBox {
height: 100px;
width: 100px;
background-color: blue;
transition: all .3s ease;
position: absolute;
display: none;
}
.pinkBox {
height: 100px;
width: 100px;
background-color: pink;
transition: all .3s ease;
position: absolute;
}
.show {
transform: translateY(100px);
}
.displayed {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blueBox'>
</div>
<div class='pinkBox'>
</div>

How do I wrap my text within a sliding navigation panel?

I have a panel that slides up and down when you click on it. When the panel slides down, some navigation text appears. When the panel slides up, the text is supposed to slide up with it, but it isn't. The panel slides and the text stays on the back. It hides but doesn't slide with the panel.
HTML:
<div id="panel">
<ul class="nav">
home
proj
about
</ul>
</div>
<div id="flip"></div>
Javascript:
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
CSS:
#flip {
content: url("Some image to click on");
margin: auto;
z-index: 100;
}
#panel {
padding: 5px;
text-align: right;
background-color: #fff;
display: block;
z-index: 100;
opacity: 0.7;
/* position:fixed;
width: 100%; */
}

Sorry mate, I don't know jQuery, but very quickly you could try and implement this via CSS transitions.
Once you have set the transition as
transition: property duration timing-function delay, property duration timing-function delay;
e.g.
transition: height 0.5s ease-in, opacity 0.25 ease-in 0.5s;
when you hover over the #panel (pseudo class :hover ), you can set different values for the #panel height and opacity.
Don't forget vendor-specific versions of the transition property (like -webkit-, -o- and so on).

fadeIn not working on nth-child(2)

Could someone have a look at my code. what it's suppose to do is animate the img tags using fadeIn and fadeOut but it only fades out the first img and doesn't fade in the second img. I think my css could be wrong and that's why the second image isn't showing Im not getting any errors
its an image on top of another image
jQuery
$(document).ready(function() {
$('.social-media a').on('mouseenter', function(e) {
$(this).find("img:nth-child(2)").fadeIn();
$(this).find("img:nth-child(1)").fadeOut()
});
})
HTML
<div class="social-media">
<a title="Share On Twitter" href="#">
<img alt="" src="images/icon_twitter.png" />
<img class="test" alt="" src="images/icon_twitter_active.png" />
</a>
</div>
CSS
.social-media {
padding-top: 20px;
width: 166px;
margin: 0 auto 10px auto;
}
.social-media a {
position: relative;
width: 55px;
height: 51px;
}
.social-media a img:nth-child(1) {
opacity: 1;
}
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
opacity: 0;
z-index: 2;
}

Instead of hiding the second <img> element with zero opacity, you should use display: none instead:
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
display: none;
z-index: 2;
}
http://jsfiddle.net/8vH4E/
However, I would strongly recommend using a simple CSS image sprite to achieve this effect, which doesn't require JS.
Update: Since OP asked if it is possible to do with CSS, I have modified the Fiddle to exclude the use of JS and simply rely on the use of CSS and pseudo-elements: http://jsfiddle.net/8vH4E/2/
.social-media a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-image: url(http://placehold.it/200x200);
background-size: cover;
}
.social-media a::before {
background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
background-size: cover;
content: '';
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.social-media a:hover::before {
opacity: 1;
}
My strategy is rather simple:
Use background images instead. For sizing, I have used cover but you are free to use any sizing (absolute pixel/point sizes, relative percentage sizes or dynamically-computed sizes like cover, contain)
For the hover state, use an absolutely-positioned pseudo element that covers the entire <a> (by positioning it absolutely and with zero offset from all four directions). We don't need pointer events on the pseudo element, so we set it to pointer-events: none
When the <a> element is hovered on (targeted with the :hover selector), we toggle the opacity of the pseudo-element from 0 to 1. We declare the transition property on the pseudo-element to allow for smooth, browser-computed and JS-agnostic transition.

the sprite is good but does not give smooth fading animation (think that was the main reason, KDM, wasn't it?).
So let's fix existing code:
as the fadeOut() turns the element to the display: none; state, as the fadeIn() starts working when the element is display: none;. So let's turn the 2nd image in display: none; first;
We can omit the opacity at all for both images (relying on 1.0 as default); $.fadeIn/Out() use the opacity from the CSS as the start/end point of the animation. Of course you can set the opacity explicitly for each image if it's designed in such way;
display: inlibe-block; for the <a> is a good point because it contains inline elements which possibly can disappear (display: none;); that causes the the whole <a> disappearing and the mouseleave event firing with unexpected UI bugs.
Enjoy http://jsfiddle.net/8vH4E/1/ and thanks to Terry for the fiddle :)