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")
});

jquery div expand with background color opacity change

Used jQuery lib:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
I have this jquery code:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#header-out').css('background-color','rgba(255,255,255,.25)').hover(function() {
$(this).stop().css('background-color','rgba(255,255,255,.80)').animate({
height: '400px'
}, 800);
}, function() {
$(this).stop().css('background-color','rgba(255,255,255,.25)').animate({
height: '75px'
}, 800);
});
});//]]>
</script>
The issue I am having is that the background opacity is not delayed along with the expand.
My goal is to have the opacity change from .25 to .80 as the div expands instead of jumping from .25 to .80 instantly. And I would like for the .80 opacity to return to .25 when the div collapses and not immediately when mouse is removed.
I'm not sure if this code is the best code to be used for what I am intending to do.
The overall goal is to have a header that expands on mouseover/hover along with a background opacity change.
Other methods I've tried:
At first I began with giving #header-out a backgroud using CSS:
#header-out {
background: rgba(255,255, 255, .25);
}
And the jquery code I used is as follows:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#header-out').hover(function() {
$(this).stop().animate({
opacity: '.80',
height: '400px'
}, 800);
}, function() {
$(this).stop().animate({
opacity: '.25',
height: '75px'
}, 800);
});
});//]]>
</script>
The problem I found with the above method was that the page would load with #header-out at an opacity of .25. After the hover, #header-out seemed to collapse to an opacity of (.80 - .25) or just .25 instead of returning to .80. Which is why I decided to remove the CSS from my #header-out and instead try using it in the jquery code.
Final note:
The html structure is as follows:
<div id="header-out">
<div id="header-in">
Content
</div>
</div>
And the CSS is:
#header-out {
width:100%;
height:75px;
position:fixed;
top:0;
left:0;
z-index:999;
cursor: pointer;
}
#header-in {
width:90%;
margin:0 auto;
padding:0;
}
I would like to have my logo and menu within #header-in.
I would like more content to become visible once the header DIV expands.

You can do this in CSS itself using transitions in modern browsers. You can check that here which all browsers support transitions.
#header-out {
width:100%;
height:75px;
position:fixed;
top:0;
left:0;
z-index:999;
cursor: pointer;
background: rgba(125,135,105,.25);
transition: all 0.6s linear;
}
#header-out:hover {
transition: all 0.6s linear;
background: rgba(45,65,135,.80);
height: 400px;
color: #fff;
}
See fiddle

$(document).ready(function(){
$('#header-out').hover(function() {
$(this).stop().animate({
'opacity':'.80',
'height': '400px'
}, 800);
}, function() {
$(this).stop().animate({
'opacity':'.25',
'height': '70px'
}, 800);
});
});
see DEMO

Fade div on hover

I have a div that contains an image, when you hover over it another div appears containing text. Is there a way (using jquery or CSS) to add a fade effect?
Heres the code im using...
.work_box1, .work_box2, .work_box3 {
display: inline-block;
height: 324px;
width: 324px;
}
.work_title {
display: none;
height: 100%;
width: 100%;
}
.work_box1:hover > .work_title, .work_box2:hover > .work_title, .work_box3:hover > .work_title {
display: block;
}

here's my go at it: http://jsfiddle.net/5c324/1/
$("#myBox").mouseenter(function() {
$( "#myBox" ).fadeTo( "slow" , 0.5, function() {});
});
$("#myBox").mouseout(function() {
$( "#myBox" ).fadeTo( "slow" , 1.0, function() {});
});

CSS3 transitions can do that. But for older browsers that can't do it without JS here's a jQuery solution:
$(".work_title").parent().hover(function() {
$(this).find(".work_title").fadeIn();
}, function() {
$(this).find(".work_title").fadeOut();
});
Demo: http://jsfiddle.net/bddde/

If I understand correctly, the work_title class is applied to the text annotations that overlay your images. In that case, you can use CSS3 transitions to fade them in and out when the mouse moves over them.
.work_title {
display: block;
opacity: 0.0;
height: 100%;
width: 100%;
}
.work_title:hover {
opacity: 1.0;
transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
}
If you want to support IE8, you'll have to include rules for filter as well as opacity -- I'll leave you to figure out how to do this :-)

Hide a div on hover outside of div

<div id='container'>
<div id="animate"></div>
</div>
I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .

This should do it
$('#small').hover(function () {
$('#animate').show();
}, function () {
$('#animate').hide();
});

Try:
CSS:
#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}
Script:
$(function(){
$('#container').mouseenter(function(){
$('#animate').fadeTo(1000,0)
.mouseenter(function(){$(this).fadeTo(1000,1)});
}); // use 750 in place of 1000 to animate it fast
});
Docs http://api.jquery.com/mouseenter/
HTML:
<div id='container'>
<div id="animate"> </div>
</div>
Fiddle: http://jsfiddle.net/aZmfz/4/

HTML:
<div id='container'>
<div id="animate">HI!</div>
</div>
CSS:
#container{
width: 100px;
height: 200px;
background-color: black;
}
#animate{
height: 50px;
width: 100px;
background-color: white;
opacity: 0;
}
jQuery:
$("#animate").hover(
function(){
$(this).stop().animate({
opacity: 1
}, 1000);
},
function(){
$(this).stop().animate({
opacity: 0
}, 1000);
}
);
EXAMPLE
You may not want to do a strict show/hide, because the element will have no height/width to hover over when it's hidden. Instead, you may prefer to set the opacity to 0 (to hide) or 1 (to show) and let the animate function transition between the two. You'll also notice that I used the .stop() function. This is because if you hover back and forth over the element it will continue to call the queued up animations. Calling stop first will prevent this.

You can achieve the same effect with pure CSS:
#animate {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#container:hover #animate {
opacity: 0;
}
#container #animate:hover {
opacity: 1;
}
Demo: http://jsfiddle.net/gXz2A/

Jquery slide out menu items

I have searched and searched for options as far a Jquery goes and I can not seem to find anything to mach what I want, yet it seems like such a simple effect. Can anyone tell me how I can have the menu items in the image below slide out like the second item when someone hovers over it?

$('.menuClass').mouseover(function(){
$(this).animate({'marginTop':'100px'});
});
$('.menuClass').mouseout(function(){
$(this).animate({'marginTop':'0px'});
});
Change the values of the marginTop accordingly.
These will also help:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
http://api.jquery.com/animate/

You can use multiple css animate method for this.
Here is your question's jQuery answer.
jQuery:
$('div').bind({
mouseenter: function() {
$(this).stop().animate({'background-position-y':'-20px','height':'68px'},600);
},
mouseleave: function() {
$(this).stop().animate({'background-position-y':'-58px','height':'30px'},600);
}
});​
css:
div {
background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
float:left; width:86px; height:30px;
} ​
----------------------------------
Or
You can do this with just using CSS3:
CSS3 animate jsFiddle example here.
div {
float:left; background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
width:86px; height:30px;
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}
div:hover { background-position-y:-20px; height:68px; } ​

You can use the animate jquery method:
http://jsfiddle.net/wWhG2/42/
$("#img").hover(function() {
$(this).stop();
$(this).animate({top:"0"},500,null);
}, function () {
$(this).stop();
$(this).animate({top:"-150"},500,null);
});