Develop Reference

CSS how to add sliding transition

I have the following fiddle demo of a working sidenav menu with sliding sub menu contents. I followed the same demo without using Jquery (actually first using plain JS and then via CSS hover selector instead of click) and in my case sub menu doesn't slides/animates in the same way.
.submenu {
display: none;
}
.parent:hover .submenu,.submeun:hover {
display: block;
}
Is that animation due to Jquery toggle method?
$(document).ready(function() {
$('.parent').click(function() {
$('.submenu').toggle('visible');
});
});
How can I replicate the same approach without using jquery, via css or plain JS as I don't want to use jquery just for one simple sliding animation.
JSFIDDLE

This way ?
document.getElementById('home').addEventListener('click', function(e) {
var nextEl = e.target.nextElementSibling;
if(!nextEl.classList.contains('submenu')) {
return false;
}
if(nextEl.classList.contains('show')) {
nextEl.classList.remove('show')
}
else {
nextEl.classList.add('show');
}
});
.submenu {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.submenu.show {
max-height: 300px;
}
<div id="sidebar">
<ul>
<li id="home" class="parent">Home</li>
<li class="submenu"><ul >
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul> </li>
<li>Explore</li>
</ul>
</div>

You could use slideToggle() and so avoid changing classes . This is just an option
Also , keep in mind that a submenu must be inside the parent li, for example <li>Home<ul><li>Sub link</li></ul></li> . I changed your HTML accordingly
see snippet below
$(document).ready(function() {
$('.parent').click(function() {
$(this).children(".submenu").slideToggle()
});
});
body, html {
height: 100%;
margin: 0;
overflow:hidden;
}
#sidebar {
background: #DF314D;
width: 240px;
height: 100%;
}
#sidebar ul {
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 15px 20px 15px 35px;
color: white;
}
#sidebar li:hover {
background: #C9223D;
}
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="parent">Home
<ul class="submenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>Explore</li>
</ul>
</div>

Hide duplicated list items/list items with same content

I got a codepen where you have to select some tabs, then you can insert your name and press submit and your name gets appended to the selected tabs. The thing is when you select multiple tabs (i did that with the jQuery selectable widget) and add your name to them, your name gets displayed multiple times. Thats pretty obvious because it gets added to every tab and that should be like that.
My goal is that javascript just hides the "duplicated" list items. So your name is just there once, but still on each tab you selected.
Thats my js:
$(function() {
$('#plannername').prop('disabled', true);
$('#plannername').attr("placeholder", "zuerst Tage auswählen");
$('#plannersubmit').attr("value", " ");
function selectionChange(event, ui) {
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
$('#plannername').prop('disabled', false);
$('#plannername').attr("placeholder", "Name eingeben");
$('#plannersubmit').attr("value", "eintragen");
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
And these are my HTML tabs:
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
If you need to see my whole code, you can check out my codepen, which I mentioned above.

Looks like 2 events will make tabs show content - selecting a tab, then selecting a tab and submitting the form. On both of those events, I would loop through the visible tabs, and hide any duplicates.
Created a function called clearDupes() that will hide duplicates, and calling it in selectionChange() and on $('#plannerform').submit()
Here's a pen since the form won't submit on SO http://codepen.io/mcoker/pen/YNoVOo
$(function() {
function clearDupes() {
var arr = [];
$('.plannerlist li').removeClass('hidden');
$('.tabcontent:visible').each(function() {
$(this).find('.plannerlist li').each(function() {
var nameText = $(this).text();
if (arr.indexOf(nameText) > -1) {
$(this).addClass('hidden');
} else {
arr.push(nameText);
}
})
})
}
// define one function, to be used for both select/unselect
$('#plannername').prop('disabled', true);
$('#plannername').attr("placeholder", "zuerst Tage auswählen");
$('#plannersubmit').attr("value", " ");
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function() {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function() {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
$('#plannername').prop('disabled', false);
$('#plannername').attr("placeholder", "Name eingeben");
$('#plannersubmit').attr("value", "eintragen");
clearDupes();
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
$('#plannerform').submit(function(e) {
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
clearDupes();
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
text-align:center;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
.hidden {
display: none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="Name eingeben" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>

Try adding this function to your code:
function isUnique(name) {
var is_unique = true;
$('ul li').each(function(item, index) {
if ($( this ).text() === name) {
is_unique = false;
}
});
return is_unique;
}
We compare the text of every list item with the current name we're attempting to append to the visible list.
You could use the function like this:
var val = $(this).find('#plannername').val();
if (isUnique(val)) {
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
$('#plannername').val('');
}
...
Forked demo

Custom animation menu CSS/ jQuery

I have this code snippet and wanted to know if there is any possibility to modify it, in order to obtain after hover translation, keeping in place or moving a few more pixels to the right on click event, until another menu botton will be clicked.
// mynewmenu implementation
$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1
;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = (whichPage - 1) * pageSize,
nextLinks = (previousLinks + pageSize);
$links.show();
$links.slice(0, previousLinks).hide();
$links.slice(nextLinks).hide();
showPrevNext();
}
function showPrevNext() {
if ((numPages > 0) && (curPage < numPages)) {
$("#nextPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#nextPage").addClass('hidden');
}
if ((numPages > 0) && (curPage > 1)) {
$("#prevPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#prevPage").addClass('hidden');
}
}
$("#nextPage").on("click", function() {
showPage(++curPage);
});
$("#prevPage").on("click", function() {
showPage(--curPage);
});
.hidden {
display: none;
}
body {
font: normal 1.0em Arial, sans-serif;
}
nav.pagedMenu {
color: red;
font-size: 2.0em;
line-height: 1.0em;
width: 8em;
position: fixed;
top: 50px;
}
nav.pagedMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav.pagedMenu ul li {
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition:
-webkit-transform 220ms, background-color 200ms, color 500ms;
transition: transform 220ms, background-color 200ms, color 500ms;
}
nav.pagedMenu ul li.hovered {
-webkit-transform: translateX(1.5em);
transform: translateX(1.5em);
}
nav ul li:hover a {
transition: color, 1200ms;
color: red;
}
nav.pagedMenu ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: gold;
transition: color, 1200ms;
text-decoration: none;
}
#pagination, #prevPage, #nextPage {
font-size: 1.0em;
color: gold;
line-height: 1.0em;
padding-top: 250px;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
<ul style="font-size: 28px;">
<li class="" style="margin-bottom: 5px;">Link 1</li>
<li class="" style="margin-bottom: 5px;">Link 2</li>
<li class="" style="margin-bottom: 5px;">Link 3</li>
<li class="" style="margin-bottom: 5px;">Link 4</li>
<li class="" style="margin-bottom: 5px;">Link 5</li>
<li class="" style="margin-bottom: 5px;">Link 6</li>
<li class="" style="margin-bottom: 5px;">Link 7</li>
<li class="" style="margin-bottom: 5px;">Link 8</li>
<li class="" style="margin-bottom: 5px;">Link 9</li>
<li class="" style="margin-bottom: 5px;">Link 10</li>
<li class="" style="margin-bottom: 5px;">Link 11</li>
<li class="" style="margin-bottom: 5px;">Link 12</li>
</ul>
</nav>
<div id="pagination">
Previous
Next
<span id="msg"></span>
</div>
A live example here.

after hover translation, keeping in place or moving a few more pixels
to the right on click event, until another menu botton will be
clicked.
Added .toggleClass(), .hasClass() , .not() , .siblings() , .hover() to jsfiddle https://jsfiddle.net/kjhtswp9/ originally created by #CY5 , maintaining hover translation effect
$(function () {
$('nav ul li').click(function (e) {
//Set the aesthetics (similar to :hover)
$('nav ul li')
.not(".clicked").removeClass('hovered')
.filter(this).addClass("clicked hovered")
.siblings().toggleClass("clicked hovered", false);
}).hover(function () {
$(this).addClass("hovered")
}, function () {
$(this).not(".clicked").removeClass("hovered")
});
var pageSize = 4,
$links = $(".pagedMenu li"),
count = $links.length,
numPages = Math.ceil(count / pageSize),
curPage = 1;
showPage(curPage);
function showPage(whichPage) {
var previousLinks = (whichPage - 1) * pageSize,
nextLinks = (previousLinks + pageSize);
$links.show();
$links.slice(0, previousLinks).hide();
$links.slice(nextLinks).hide();
showPrevNext();
}
function showPrevNext() {
if ((numPages > 0) && (curPage < numPages)) {
$("#nextPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#nextPage").addClass('hidden');
}
if ((numPages > 0) && (curPage > 1)) {
$("#prevPage").removeClass('hidden');
$("#msg").text("(" + curPage + " of " + numPages + ")");
} else {
$("#prevPage").addClass('hidden');
}
}
$("#nextPage").on("click", function () {
showPage(++curPage);
});
$("#prevPage").on("click", function () {
showPage(--curPage);
});
});
.hidden {
display: none;
}
body {
font: normal 1.0em Arial, sans-serif;
}
nav.pagedMenu {
color: red;
font-size: 2.0em;
line-height: 1.0em;
width: 8em;
position: fixed;
top: 50px;
}
nav.pagedMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
nav.pagedMenu ul li {
height: 1.0em;
padding: 0.15em;
position: relative;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
-webkit-transition: -webkit-transform 220ms, background-color 200ms, color 500ms;
transition: transform 220ms, background-color 200ms, color 500ms;
}
nav.pagedMenu ul li.hovered {
-webkit-transform: translateX(1.5em);
transform: translateX(1.5em);
}
nav ul li:hover a {
transition: color, 1200ms;
color: red;
}
nav.pagedMenu ul li span {
display: block;
font-family: Arial;
position: absolute;
font-size: 1em;
line-height: 1.25em;
height: 1.0em;
top: 0;
bottom: 0;
margin: auto;
right: 0.01em;
color: #F8F6FF;
}
a {
color: gold;
transition: color, 1200ms;
text-decoration: none;
}
#pagination,
#prevPage,
#nextPage {
font-size: 1.0em;
color: gold;
line-height: 1.0em;
padding-top: 250px;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
<ul style="font-size: 28px;">
<li class="" style="margin-bottom: 5px;">Link 1
</li>
<li class="" style="margin-bottom: 5px;">Link 2
</li>
<li class="" style="margin-bottom: 5px;">Link 3
</li>
<li class="" style="margin-bottom: 5px;">Link 4
</li>
<li class="" style="margin-bottom: 5px;">Link 5
</li>
<li class="" style="margin-bottom: 5px;">Link 6
</li>
<li class="" style="margin-bottom: 5px;">Link 7
</li>
<li class="" style="margin-bottom: 5px;">Link 8
</li>
<li class="" style="margin-bottom: 5px;">Link 9
</li>
<li class="" style="margin-bottom: 5px;">Link 10
</li>
<li class="" style="margin-bottom: 5px;">Link 11
</li>
<li class="" style="margin-bottom: 5px;">Link 12
</li>
</ul>
</nav>
<div id="pagination">
Previous
Next
<span id="msg"></span>
</div>
jsfiddle http://jsfiddle.net/kjhtswp9/3

Open div on mouse enter and keep it open

I'm trying to make a div open when you hover a link. Which is simple enough and I'm doing fine. But I also want to be able to access the div without it closing. So if I hover over the newly opened div it will stay open. But If I hover out of the div I want it to close.
I also want to make sure that if I hover out of the link that the div closes. I have done this a few times before but for the life of me I cant sort it back out. I remember using setTimeout previously but my mind has went to mush and it's late so thought I might as well ask for some help.
I'm also aware that mouseenter and mouseleave would be far better than hover in this situation I just typed it up as hover for speed.
UPDATE
Changing the HTML is not an option this is a jquery question not an html or CSS one.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(
function() {
$(this).show();
}, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>

Move the div with the class open to the li as child element. The JS is now also simpler for your case. You can find the fiddle here: https://jsfiddle.net/ej5gkgat/.
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true">
<a>true</a>
<div class="open"></div>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
New CSS:
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
position: absolute;
background-color: red;
width: 300px;
height: 300px;
display: none;
}
New JS:
jQuery(document).ready(function($) {
"use strict";
$("li.true").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
});

Simple solution is not to use both parameters of hover in jquery.
when hover on "li.true a" simply ignore the second parameter, which hides your div. use null to skip on div.open's hover.
but if you ask for the right way. use CSS for these type of interactions. there is no need for JS to do this.
Edit: If you need to hide it when on siblings of "li.true a"'s hover.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}
);
$("li:not(.true) a").hover(
function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(null, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>

Use this js it uses timeout
jQuery(document).ready(function($) {
"use strict";
var t;
$("li.true a, .open").hover( function() {
clearTimeout (t);
$(".open").fadeIn(1000);
}, function() {
clearTimeout (t);
t = setTimeout(function(){
$(".open").fadeOut(1000);
},1000);
} );
});

You can do this with only css:
body{ font-family:sans-serif; }
nav {
background:blue;
padding:12px;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
padding:6px;
border:1px inset white;
cursor:pointer;
transition:all .5s;
background:red;
}
ul li:hover {
background:white;
color:black;
}
ul ul {
display:none;
}
ul li:hover > ul {
display:inherit;
position:absolute;
top:68px;
float:none;
}
ul ul li {
display:inherit;
float:none;
position:relative;
left:-47px;
}
HTML:
<nav>
<ul>
<li> Example.com </li>
<li> Languages
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Javascript </li>
</ul>
</li>
<li> Something
<ul>
<li> Something </li>
</ul>
</li>
</ul>
</nav>

You can try doing it without timeout (not a big fan of), but with fadeTo() and stop()
Opacity is used to check visibility and calculate estimate remaining fade time.
JSFiddle example
jQuery(document).ready(function($) {
"use strict";
var fadeout = 1000;
var fadein = 800;
$("li.true a").hover(function() {
var opacity = $(".open").css("opacity");
opacity = opacity && opacity < 0.8 ? opacity : 0;
$(".open").stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
var opacity = $(".open").css("opacity");
if (opacity > 0) $(".open").fadeTo(fadeout, 0);
});
$(".open").hover(function() {
var opacity = $(this).css("opacity");
if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
$(this).fadeTo(fadeout, 0);
});
});

How to animate stuff with animate.css and Jquery

I have following code pieces
HTML
<ul id="test">
<li class="a">1</li>
<li class="b">2</li>
<li class="c">3</li>
</ul>
<ul id="test2">
<li data-prod="a" class="animated">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li data-prod="b" class="animated hide">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li data-prod="c" class="animated hide">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
</ul>
CSS
ul#test > li {
display: inline-block;
padding: 10px;
cursor: pointer;
}
#test {
position: fixed;
top: 0;
left: 0;
}
#test2 {
position: fixed;
top: 0;
right: 0;
list-style: none;
}
#test2 > li {
background: yellow;
width: 350px;
height: 600px;
/* transition: height 0.3s ease, width 0.2s ease;*/
overflow: hidden;
margin-top: -30px;
padding-top: 30px;
margin-right: -50px;
}
.hide {
display: none;
}
And this jquery
$(document).ready(function () {
$('#test li').on('click', function () {
var className = $(this).attr('class');
$('#test2 > li').each(function () {
var prodName = $(this).data('prod');
if (prodName == className) {
$('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
$this = $(this);
setTimeout(function () {
console.log(this);
$('#test2 > li').addClass('hide')
$this.removeClass('hide bounceOutRight').addClass('bounceInRight');
}, 400);
}
});
})
});
Here is the DEMO
I have few questions
For each click on li of ul with id #test it animates the
appropriate li of ul that has id #test2. How do I animate each div in lis as
fadeInTop (animate.css) one after another without
using classes and ids (just using tag selectors) once the li has completed the animation.
Is there a better way of doing what i have done with jquery with better performance. I have added this part of question in codereview

You can add a callback for the animation. Without removing and adding class you can't repeat an animation.
$(document).ready(function () {
$('#test li').on('click', function () {
var className = $(this).attr('class');
$('#test2 > li').each(function () {
var prodName = $(this).data('prod');
if (prodName == className) {
$('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
$this = $(this);
$this.find('div').removeClass('fadeInDown');
setTimeout(function () {
console.log(this);
$('#test2 > li').addClass('hide')
$this.removeClass('hide bounceOutRight').addClass('bounceInRight');
}, 400);
}
});
})
$('#test2 li').on('oanimationend animationend webkitAnimationEnd', function() {
$(this).find('div').each(function(i){
var $this = $(this);
setTimeout(function(){
$this.addClass('animated fadeInDown')
},i*500);
})
});
});
ul#test > li {
display: inline-block;
padding: 10px;
cursor: pointer;
}
#test {
position: fixed;
top: 0;
left: 0;
}
#test2 {
position: fixed;
top: 0;
right: 0;
list-style: none;
}
#test2 > li {
background: yellow;
width: 350px;
height: 600px;
/* transition: height 0.3s ease, width 0.2s ease;*/
overflow: hidden;
margin-top: -30px;
padding-top: 30px;
margin-right: -50px;
}
.hide {
display: none;
}
ul#test2 > li div { padding: 5px; transform: translate3d(0,-2000px,0)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<ul id="test">
<li class="a">1</li>
<li class="b">2</li>
<li class="c">3</li>
</ul>
<ul id="test2">
<li data-prod="a" class="animated hide">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li data-prod="b" class="animated hide">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li data-prod="c" class="animated hide">
<div>1</div>
<div>2</div>
<div>3</div>
</li>
</ul>