How can I get li items to slide and/or fade into view on this jQuery list?


Tags: javascript,jquery,html,css

Problem :

Okay, so I have an input textarea that when you hit enter on it, a list item with your word appears. When you hit X on the list item, it slides up out of view (I was able to figure that out).

But I can't figure out how to make the list items slide down into view when you hit enter -- instead, they just appear really suddenly, which I think looks bad.

How do I make the list items gracefully slide into view when you hit enter?

http://jsfiddle.net/mlynn/vxzc6z6y/

HTML

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>               
        <link type="text/css" rel="stylesheet" href="css/styletime.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script> 
    </head>


    <body>
         <section id="heady">
             <div style="width:1000px;margin-left:auto;margin-right:auto;">         
                <div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:28px;"><b><a href="index.html"></b></a></p></div>

                <div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">    
                        <!--<a href="profile.html">Home</a> | 
                        <a href="index.html">Generic</a> |
                        <a href="index.html">Elements</a> | -->
                </div>
             </div>

        </section>

        <section id="wrapper">
            <br><br>
            <!--<img src="images/blacksquare.png" width="525" height="197"></img>-->
            <div style="float:left;padding:0px 0px;font-size:14px;">Left...</div>
            <div style="float:right;padding:0px 0px;font-size:14px;">...Right</div>

            <br><br>


            <div class="LeftPanel">




                <div style="vertical-align:top;display:inline-block;float:left;">        
                    <ul class="navbar cf">
                        <!-- <li><a href="#">item 2</a></li> -->
                        <li style="width:200px;">
                            <a href="#" class="ActiveListItem">Category</a>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>                                                               



                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <form action="">
                        <input type="text" class="clearable" placeholder="Type a task and hit enter..." autocomplete="off">
                    </form>


                    <!-- <ul class="active">
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                    </ul> -->

                </div>




                <div class="InterestContainer mousescroll">
                    <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 0px;">
                        <ul class="active">
                            <!--
                            <li>Work <a href="">X</a></li>
                            <li>Sleep <a href="">X</a></li>
                            <li>Repeat <a href="">X</a></li>
                            -->
                        </ul>
                    </div>
                </div>


            </div> 


            <div class="RightPanel">



            <div style="float:right;vertical-align:top;width:450px;height:400px;background:white;border-color:#ccc;border-width:1px;border-style:solid;border-radius:4px;">
                New div goes here??
            </div>

            </div>


        </section>



        <section id="feety">
        Footer
        </section> 




    </body>


</html>

CSS

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:#FFFFFF;                                /*Back Colors*/
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
    color: #34495e;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:#000000;
    position:relative; 
    /*background:url('http://wallpaperupdate.com/Images/product/plaid-wallpaper-kxeo-l.jpg');*/
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}



.LeftPanel{
    float:left;
    width:465px;

}



.RightPanel{
    float:right;
    width:465px;

}



.InterestContainer{
    height:374px;
    width:460px;
    background:none;
    vertical-align:top;
    /*border-color:#000;
    border-width:1px;
    border-style:solid;
    border-radius:4px;*/    
}


.mousescroll {
    overflow-x:hidden;
    overflow-y:auto;
}

/*
.mousescroll {
    overflow:hidden;   
}

.mousescroll:hover {
    overflow-y:scroll;
}*/



/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:#ccc;
  border-width:1px; 
  width: 130px;                /*Widthchanger1*/
  border-radius: 4px;
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
  height:33px;


}



.ActiveListItem:after {
    content: "\25BC";                        /*carat and spaces \00a0*/ 
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:17px;             /*keeps carat in center of text*/ 

}  



ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black !important;
    padding:3px 5px !important; 
    font-weight:normal !important;
    margin-left:10px;         /*Widthchanger2, got the activeitem centered with list text this way*/
    margin-right:0px;
    margin-top:5px;
    margin-bottom:6px;
    width:100px;   /*kinda messes with width of text*/

}

ul.navbar li {
    position: relative;
    width:130px;                        /*Changes width of actual list*/
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#dadfe1; 
    color: #34495e;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }







/*Lister*/



.container {


}

form {  }



.lister input {
    border-radius: 5px;
    width:278px;   /*width of todo input box*/
    height:33px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid #ccc;
    float:left;
    margin-bottom:20px;
    font-size:14px;
    font-family:"Tahoma";
}

.lister ul {
    /*list-style: square inside;*/
    padding: 10px; /* padding for outside area of list*/  /* This is what's visible when not in use*/
    width:419px;
    background: #eee;
    border-radius: 5px;
    /* width: 100%; */
    font-family:"Tahoma";


}

.active { border: 1px solid #ccc; }

.inactive { display: none;}

.lister li {
    padding: 10px; /*controls height of list items*/
    font-size:16px; /*font size of list items*/
    font-weight: 600;
    color: #34495e;
    text-align:left;
}


.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


/*.lister li:before {
    content: "";                        
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             
}


.CategoryIcon {
    float:right;
    color:red;
    padding:40px 40px;
} */






/*Clearable*/

.clearable {
    background: #fff;
    background:url(http://s3.amazonaws.com/redditstatic/award/1_year_club-40.png);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position:right -15px center;

  transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; }
.clearable.onX { cursor: pointer; }

JS

// sub menus identification
$(function() {




  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input'),
        CategoryIcon;


    input.focus();  

    $(document).on('click', 'input.onX', function()
                  {

                      //alert(1);

                     if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;

                  });


    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().slideUp();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});







//clearable

jQuery(function($) {


  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });


});

Thank you.



Solution :

Instead of appending the li by calling append on th ul:

 ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');

You can select this new li to a jQuery object, hide it, append to the ul and then call slideToggle:

$('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>').hide().appendTo(ul).slideToggle(1000);

    CSS Howto..

    How to insert a div in between flexbox rows and keep everything responsive?

    how to create a image slider with help of only HTML and CSS?

    How can i give transparency effect in CSS?

    Android Layout, how to make a radius and border like css

    How to show a region on a image with CSS

    How can I get the images in my carousel to center?

    how can i force all rows in a table to have the same height

    Why is last select option always shown, even when styled out

    How to set CSS on body tag to rotate a page using JavaScript

    How to put a list of images in a fixed div

    How to center inline blocks together with text vertically without space at bottom?

    How to set the css properties with its own data-attributes?

    how to make NGINX serve static content like .js, .css, .html?

    How to show local html file into webview?

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to make full window canvas in GWT?

    How to make simple_form input field wider with CSS?

    How do i place 4 headers from 1 div next to each other?

    How to remove the vertical white line between the two green divs without floating?

    How do I correct this error?

    How to style the values in a textfield using CSS?

    How to style a XUL textbox with CSS :focus

    How to do this kind of Button in CSS?

    How to vertically align Facebook and Twitter share buttons

    CSS: How to make a block to cover all width of parent block

    How to change the navbar position? CSS & HTML

    How can I load dynamically typekit fonts?

    Last inherited display property is inline but computed is block. How is this even possible?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?