Develop Reference

Animate Position Change As Div Floats Left

I have a bunch of divs that live inside a container. When a user clicks on one of them they are removed and a divs below that one slide over to fill the space it left because they are set to float:left like this jsFiddle. I want the divs to animate as they move over to fill the space. Is there a CSS or jQuery function to automatically do that, or would I have to calculate the position each div is currently in and then call some kind of animateAll() to move them to the position that they will be?

Add $(this).addClass('hide').fadeOut(500, function() { $(this).remove(); }); to hide and remove that child after transition
demo:-
$("div").click(function(){
$(this).addClass('hide').fadeOut(500, function() { $(this).remove(); });
});
div {
float:left;
height:20px;
width:20px;
margin:5px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div:hover {
cursor:pointer;
}
.hide {
width: 0;
height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:red;"></div>
<div style="background:orange;"></div>
<div style="background:yellow;"></div>
<div style="background:green;"></div>
<div style="background:blue;"></div>
<div style="background:purple;"></div>
Check this fiddle

Please check this script.
$("div").click(function(){
$(this).css('opacity',0).animate({
width: 0,
}, 1000, function() {
$(this).remove();
});
});

try this
$("#divname").click(function(){
$("div").animate({"width":"0px"}, "slow",function() {
$(this).remove();
});
});

you can use jquery animate
$("div").click(function(){
$(this).remove();
$("div").animate({"left":"0px"}, "slow")
});

Fade in on switching classes in javascript

I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow); but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.
Javascript:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
CSS:
header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}
CODE PEN

try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}

To solve your problem you can simply use jQuery's animate. Here's the syntax and explanation. It smoothly animates any css property you would want to animate. Therefore you can do:
CSS:
header {
opacity:1;
}
(just sets the default)
JS:
header.animate({opacity: "0"}, 500);
To fade out, and the same thing but with opacity 1 to fade in. You may want to comment out the display part of your classes for testing though, as it may influence how it all behaves.

FadeIn FadeOut and why the div moves?

probably is something that I'm missing, but I have a little headache with this.
I'd like to have the "submenu div" align on the right of Show/hide links.
When I load the div is correctly in its place, but when I click to hide/show links, suddenly the div changes the place to the bottom.
BTW, is there any other better way to do this, or this this is good? Also, if I don't what to show the div on the page load, I'm thinking to use .hide() or hidden style, is that ok?
Example http://jsfiddle.net/DH75T/
Thanks in advance
CSS
div.inline2 {
display: inline-block;
width: 150px;
}
div.inline {
position:absolute;
display: inline-block;
border:1px solid #CCC;
background:#FFF;
}
JS
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').fadeIn();
});
$('a#hide').click(function() {
$('div#submenu').fadeOut();
});
});
HTML
<div class="inline2">
Show_links
Hide links
</div>
<div class="inline" id="submenu">
Link 1<br />
Link 2
</div>

fadeIn() adds div style display: block; so div shows down to next line
Before div was styled inline-block
div.inline2 {
display: inline-block;
width: 150px;
}
fiddle Demo
Use classes to add effect of fadeIn and fadeOut without moving your div to next line
$(document).ready(function () {
$('a#show').click(function () {
$('div#submenu').removeClass('hidden').addClass('visible');
});
$('a#hide').click(function () {
$('div#submenu').addClass('hidden').removeClass('visible');
});
});
css
.visible {
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}

Try:
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').removeClass("none");
});
$('a#hide').click(function() {
$('div#submenu').addClass("none");
});
});
Fiddle here.

You need to change only jQuery code :) :
<script type="text/javascript">
$(document).ready(function() {
$('a#show').click(function() {
$( "div#submenu" ).animate({
opacity: 1
}, 500, function() {
// Animation complete.
});
});
$('a#hide').click(function() {
$( "div#submenu" ).animate({
opacity: 0
}, 500, function() {
// Animation complete.
});
});
});</script>

Menu fade still on hover state on Chrome & Safari

I'm developing a new Joomla 2.5 website and I have to implement a fade effect on the menu for the first level of li only.
Site url: http://goo.gl/Eu9Mt
I added this effect but I have a problem on "Google Chrome" & "Safari" only. When I hover the mouse on a sub menu and move the mouse away but without hover the parent menu the fade effect still exist but when I move the mouse away and the last item I hovered was the parent item, the fade effect execute correctly.
here is my jQuery code:
(function($){
$(document).ready(function () {
$('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').append('<div class=\'hover\'><div><\/div><\/div>');
$('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').hover(
function() {
$(this).children('div').stop(true, true).fadeIn('1000');
},
function() {
$(this).children('div').stop(true, true).fadeOut('fast');
}).click (function () {
$(this).addClass('selected');
});
});
})(jQuery);
Please advise

add this on your css:
#ja-mainnav li.haschild .hover {
background-image: none;
}
#ja-mainnav li.haschild-over.over .hover {
background-image: url("../../images/nav/menu_over.gif");
}
#ja-mainnav li.haschild .hover div {
background-image: none;
}
#ja-mainnav li.haschild-over .hover div {
background-image: url("../../images/nav/menu_overspan.gif");
}
to add a transition with pure css, you can apply this on the hover stage (for example):
-webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.5–12.00 */
transition: all 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */
no IE support I'm afraid
hope this helps

Navigation text fading in-out using css

I'm trying to make a portfolio for me. I wish to have a fading in-out effect while I roll over the navigational links (which is pure text). Is there any way to get the fading effect using css ? Or what should I do for that ? Please help me :)

Couple of ways to do this.
CSS3:
Using -webkit-transition.
#fademe {
opacity: 0.5;
-webkit-transition: opacity 1s;
}
#fademe:hover {
opacity: 1;
-webkit-transition: opacity 1s;
}
jQuery (Javascript):
jQuery's hover and fadeTo methods.
$("#fademe").hover(function(){
$(this).fadeTo(1);
}, function(){
$(this).fadeTo(0.5);
});

check out CSS transitions - MDC Doc Center
or Different Transitions for Hover On / Hover Off | CSS-Tricks
from css-tricks:
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}

You can use the jquery fadein and fadeout to do it.