Develop Reference

How do I animate moving a list item to the top?

I have a list and would like to move the item to the top when it's clicked on. Simultaneously, all other items should move down to make space.
That's what I have so far:
<ul id="list">
<li id="one">item-1</li>
<li id="two">item-2</li>
<li id="three">item-3</li>
<li id="four">item-4</li>
</ul>
//
$('li').on('click', function () {
$(this).css({ position : 'absolute', top : $(this).position().top });
var height = $(this).parent().children().first().height();
var list = $(this).parent();
$(this).animate({top: '0px'}, { duration: 500, queue: false });
list.children().each(function( index, element) {
var $liElement = $(element);
if($liElement != $(this))
{
$liElement.animate({top: height + 'px'}, { duration: 500, queue: false });
}
});
});
Here is the link: http://jsfiddle.net/5qgnjvdp/
I see the item moving on top but all others don't move at all. What is wrong here?
Should I use prepend() to insert the list item on top when the animation is finished?

While not really an "animation", I was working on something some time ago along similar lines. What I ended up using was a slideUp, then a slideDown to give a sense of animation without actual animation connected to the move.
$('li').click(function() {
$(this).slideToggle(500, function() {
$(this).prependTo('#list').slideToggle(500); });
});
li { list-style: none; background: #ddd;padding: 5px 10px; border: 1px solid #aaa; margin: 10px; text-transform: uppercase; font-weight: bold;color:#fff; }
#list { margin:20px; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="list" data-role="listview">
<li id="one">item-1</li>
<li id="two">item-2</li>
<li id="three">item-3</li>
<li id="four">item-4</li>
</ul>
$('li').click(function() {
$(this).slideToggle(500, function() {
$(this).prependTo('#list').slideToggle(500); });
});
fiddle update
Again, I realize this isn't really an animation beyond the slide toggles, but it conveys a sense of interactivity similar to an animation.

There are a couple of problems with your script.
When comparing $liElement != $(this) you are in the scope of the each function where this refers to the current list child, which is the same as element. Store the clicked li in a variable outside of the looping function and compare with that. Also no need to compare the $(...) objects. element != clickedLi would suffice.
When you animate the other li elements they don't have position: absolute (or relative) so you won't see their movement.
If you assign the other li elements an absolute position you move all of them to the same position, the second row in the list. You could use position relative to move them down. You should just make sure to exclude the elements that come after the original position of the clicked li.
After the animation is complete you should insert the list item as the first child of the list and then remove the absolute/relative positioning, including the top style to make sure it works a second time (and to ensure that the visible representation is in line with the elements' structure.

Variable menu length

Brand new to jquery. I'm trying to make a drop-down animated menu that opens up just enough to show submenus while dropping the menu items as well. For example:
Item1
Item2
Item3
And when you mouse over Item2 you get
Item1
Item2
Subitem1
Subitem2
Item3
I know my code needs a lot more work (I'm playing/experimenting now) and my problem is when trying to use a variable the menu doesn't open up at all so the problem is somewhere with the height: variable line.
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height: $('ul > li').length * 20})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'18px'})
});
});
I'd actually prefer to make separate variable lines such as
$(document).ready(function(){
var numitems = $('ul > li').length;
var totalheight = numitems * 20;
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height: totalheight})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'18px'})
});
});

try this:
$(document).ready(function(){
var numitems = $('ul > li').length;
var totalheight = (numitems * 20)+'px';
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height: totalheight},500); //don't forget to give the animation some duration
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'18px'},500);
});
});

Forget about trying to store the height of the elements and multiplying up. You will run into serious problems if you do this in the future.
You can always get the height of an element with jQuery's outerHeight() property. But if you want this to happen on the mouse enter/out, you would be tidier with the .hover() function of jQuery and do the following :
var speed = 500;
$("li.top").hover(function () {
var ul = $(this).find("ul");
$(ul).stop(); // stop any current animation
// tidy up attributes that have been added
$(ul).removeClass("flattened");
$(ul).css("height", ""); // very necessary;
$(ul).css("display", ""); // very necessary;
$(ul).removeClass("show");
var _height = $(ul).outerHeight();
$(ul).addClass("flattened");
$(ul).addClass("show");
$(ul).show();
$(ul).animate({ height: _height }, speed , function () {
$(ul).removeClass("flattened");
});
}, function () {
var ul = $(this).find("ul");
$(ul).stop();
$(ul).animate({ height: "0px" }, speed , function () {
$(ul).hide();
$(ul).css("height", ""); // very necessary;
$(ul).css("display", ""); // very necessary;
$(ul).removeClass("show");
});
});
I used the following CSS to make things work in my test file:
ul li a { float: left; width: 100%; }
ul li > ul { display: none;float:left; }
ul li { float: left; width: 100%; border: solid 1px black; min-height: 0; }
.flattened { height: 0px; overflow:hidden; }
And the following HTML:
<nav>
<ul>
<li class="top">Item 1</li>
<li class="top">Item 2
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
</ul>
</li>
<li class="top">Item 3</li>
</ul>
</nav>
Hope this works for you.

JQuery show and hide div on mouse click (animate)

This is my HTML code:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).
I use JQuery 2.0.3
I've tried this, but it doesn't do what I want.
$(document).ready(function() {
$('#showmenu').toggle(
function() {
$('.menu').slideDown("fast");
},
function() {
$('.menu').slideUp("fast");
}
);
});

That .toggle() method was removed from jQuery in version 1.9. You can do this instead:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/APA2S/1/
...but as with the code in your question that would slide up or down. To slide left or right you can do the following:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').toggle("slide");
});
});
Demo: http://jsfiddle.net/APA2S/2/
Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.

Of course slideDown and slideUp don't do what you want, you said you want it to be left/right, not top/down.
If your edit to your question adding the jquery-ui tag means you're using jQuery UI, I'd go with nnnnnn's solution, using jQuery UI's slide effect.
If not:
Assuming the menu starts out visible (edit: oops, I see that isn't a valid assumption; see note below), if you want it to slide out to the left and then later slide back in from the left, you could do this: Live Example | Live Source
$(document).ready(function() {
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().animate({left: 0});
}
});
});
You'll need to put position: relative on the menu element.
Note that I replaced your toggle with click, because that form of toggle was removed from jQuery.
If you want the menu to start out hidden, you can adjust the above. You want to know the element's width, basically, when putting it off-page.
This version doesn't care whether the menu is initially-visible or not: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<script>
$(document).ready(function() {
var first = true;
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
}
});
});
</script>
</body>
</html>

I would do something like this
DEMO in JsBin: http://jsbin.com/ofiqur/1/
Click Here
<div class="menu">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
and in jQuery as simple as
var min = "-100px", // remember to set in css the same value
max = "0px";
$(function() {
$("#showmenu").click(function() {
if($(".menu").css("marginLeft") == min) // is it left?
$(".menu").animate({ marginLeft: max }); // move right
else
$(".menu").animate({ marginLeft: min }); // move left
});
});

Try this:
<script type="text/javascript">
$.fn.toggleFuncs = function() {
var functions = Array.prototype.slice.call(arguments),
_this = this.click(function(){
var i = _this.data('func_count') || 0;
functions[i%functions.length]();
_this.data('func_count', i+1);
});
}
$('$showmenu').toggleFuncs(
function() {
$( ".menu" ).toggle( "drop" );
},
function() {
$( ".menu" ).toggle( "drop" );
}
);
</script>
First fuction is an alternative to JQuery deprecated toggle :) . Works good with JQuery 2.0.3 and JQuery UI 1.10.3

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click-header").click(function(){
$(this).next(".hidden-content").slideToggle("slow");
$(this).toggleClass("expanded-header");
});
});
</script>
.demo-container {
margin:0 auto;
width: 600px;
text-align:center;
}
.click-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
display:none;
border: 1px solid #d7dbd8;
padding: 20px;
text-align: center;
}
<div class="demo-container">
<div class="click-header"> </div>
<div class="hidden-content">Lorem Ipsum.</div>
</div>

Use slideToggle(500) function with a duration in milliseconds for getting a better effect.
Sample Html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
In your js file, if you need child propagation for the animation then remove the second click event function and its codes.
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
//for stoping child to manipulate the animation
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});

During hover on parent element, show child (dropdown nav)

I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily changeable, i just don't like to go heavy on the html side.
Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.
Here's my js:
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
function () {
dropdown.css('display', 'block');
}
);
Here's my css:
div.nav {
text-align: center;
}
div.nav > ul > li {
margin-top: 15px;
text-align: center;
font-size: 1.25em;
}
div.nav > ul > li {
display: inline-block;
list-style-type: none;
}
div.nav a {
padding: 1em;
}
div.dropdown {
display: none;
background-color: black;
position: absolute;
}
Here's my html:
<div class="nav">
<ul>
<li>Home</li>
<li>
Sample Game
<div class="dropdown">
About it
<br>
Game
</div>
</li>
<li>TP Solutions</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
<div class="clear"></div>

You should not be using "parent" as a variable name, as it's a reserved word.
$(document).ready(function() {
var $dropdown = $('.dropdown'),
$parent = $dropdown.parent();
$parent.on("mouseover",
function () {
$dropdown.css('display', 'block');
}
);
$parent.on("mouseout",
function () {
$dropdown.css('display', 'none');
}
);
});

According to the oreder this has to be done:
add a jQuery plugin first
Then add your script
so the order will be like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
<script>
$(function(){
var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(function () {
dropdown.css('display', 'block');
});
});
</script>

Please try the below code.
$(".nav").on("mouseenter","li",function(){
$(this).find(".dropdown").show();
});
$(".nav").on("mouseleave","li",function(){
$(this).find(".dropdown").hide();
});
In your code " dropdown.parent(); " -> this will refer all the parents which have child dropdown and will show the menu. we need to refer current hover parent. Please check the working example in below link.
http://jsfiddle.net/renjith/wX48f/

There are so many good solutions to use jQuery and CSS to show a drop down menus. So you don't need to reinvent the wheel. Here are some examples that you might be able to find one to fit your need.

Jquery UL Scroll

I'm trying to use Jquery to have scroll on a UL list, with two span to move up and down.
it works for one li child, but how for an ul filled dynamically ?
thank you, i'm totally lost
$('span.scrollDown').click(function () {
$('.liste-grostitres li:first-child').css('margin-top', 0 - $('.liste-grostitres li').outerHeight());
$('.liste-grostitres').css('overflow', 'hidden');
});
$('span.scrollUp').click(function () {
$('.liste-grostitres li:first-child').css('margin-top', 0);
$('.liste-grostitres').css('overflow', 'visible');
});
<div id="grostitres">
<div class="gInner">
<span class="scrollUp"></span>
<span class="scrollDown"></span>
<div class="scrollable" id="divlist" runat="server">
<ul>
<li></li>
<li></li>
...
</ul>
</div>
</div>

heres a fiddle with slidetoggle:
http://jsfiddle.net/RMQLM/
also the working code example:
HTML:
<div id="up">up</div>
<div id="list">
<ul>
<li>foo1</li>
<li>bar1</li>
<li>foo2</li>
<li>bar2</li>
<li>foo3</li>
<li>bar3</li>
<li>foo4</li>
<li>bar4</li>
<li>foo5</li>
</ul>
</div>
<div id="down">down</div>
CSS:
div#list {
height: 93px;
overflow: hidden;
border: 1px solid red;
}
jQuery:
var listcount = $('li').size();
var cli = 1;
$('#down').click(function() {
if (cli < listcount) {
$('li:nth-child(' + cli + ')').slideToggle();
cli++;
}
});
$('#up').click(function() {
if (cli > 1) {
cli--;
$('li:nth-child(' + cli + ')').slideToggle();
}
});

Set your UL to be position: relative; and have top: 0;.
Add a function to handle the animation:
var scroll_ul = function(offset) {
// Target the UL to scroll
var to_scroll = $('#divlist').find('ul');
// Store the distance to scroll (assumes LIs are all equal height)
var scroll_distance = $('#divlist').find('li').outerHeight(true);
// Animate
to_scroll.stop().animate({ top: '-=' + (offset * scroll_distance) });
};
Then change your click handlers to be something like this:
$('span.scrollDown').click(function() {
scroll_ul(1);
});
$('span.scrollUp').click(function() {
scroll_ul(-1);
});
You may experience strange scroll distances if you hammer the scrollDown/scrollUp buttons. That's when you should look into jQuery's .one() function.

I think it would be more efficient to animate the whole UL instead of individual LIs. You already wrap the UL in a DIV, so why not animate the UL relative to the wrapper? That would work the same way as animating a single LI inside UL, so you don't need to reinvent the wheel.