CODEWITHSUNDEEP
jqueryhtmlcss
Asim
Asim

Reputation: 452

Horizontal Animation in JQuery

I am making an upcoming events section in my web site but I am not able to figure out how to put it right here is what I was able to do. JQuery here.

jsfiddle.net/VRm4a/1

<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <style type="text/css">
            #wrap
            {
                width:300px;
            }
            #container
            {
                height:403px;
                background-color:#CCC;
                overflow:hidden;
                overflow-x: auto;
                overflow-y: no-content;
                margin-top:100px;
            }
            #container ul 
            { 
                list-style:none;
                padding:0px;
                margin-top:0px;
            }
            #container ul li
            {
                width:300px;
                height:100px;
                background-color:#666;
                padding-top:1px;
                margin-top:1px;
                float: left;
            }
            .bars
            {
                margin: 5px 5px 5px 5px;
            }
            .title-news
            {
                color:#6ac4bb;
                font-size:18px;
            }
            .date-news 
            {
                color:#a4a4a4;
                font-size:12px;
            }
            .body-news
            {
                color:#fff;
                font-size:12px;
            }
        </style>
        <script src="./jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                        var $chapters = $('#container').find('ul').children('li');
                        var count=0;
                        $('#down').click(function(){



                        if(count<($chapters.length-3))
                        {

                        $('#container').find("ul li:nth-child("+count+1+")").animate({opacity:'0'} , 1000); 
                        $('#container ul').animate({marginTop:'-=100px'} , 1000);
                        count++;
                        }
                        });


                        $('#up').click(function(){
                        if(count<($chapters.length-1) && count > 0 )
                        {
                        $('#container ul').animate({marginTop:'+=100px'} , 1000);
                        $('#container').find("ul li:nth-child("+count+")").animate({opacity:'1'} , 1000);       
                        count--;
                        }
                        });

                        });
        </script>
        <div id="wrap">
            <div id="container">
                <ul>
                    <li>
                        <div class="bars">
                            <p class="title-news">1</p>
                            <p class="date-news ">september</p>
                            <p class="body-news">hello<br/></p>
                        </div>
                    </li>
                    <li>
                        <div class="bars">
                            <p class="title-news">2</p>
                            <p class="date-news ">september</p>
                            <p class="body-news">hello</p>
                        </div>
                    </li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
            <div id="down" style="background-color:#06C; width:50px; margin:15px; float:left;">
                down
            </div>
            <div id="up" style="background-color:#06C; width:50px; margin:15px; float:right;">
                up
            </div>
        </div>
    </body>
</html>

What happening here is that li's are being animated vertically. I want to animate it horizontal. I'm weak in HTML/CSS I just could not even make li's to overflow horizontally. Thanks for help in advance. :)

Upvotes: 3

Views: 954

Answers (3)

Sindhu
Sindhu

Reputation: 473

try this please it is working ..:FIDDLE DEMO

 <Change ur script according to this>


 var $chapters = $('#container').find('ul').children('li');
 var count = 0;
 $('#down').click(function () {



    if (count < ($chapters.length - 3)) {

        $('#container').find("ul li:nth-child(" + count + 1 + ")").animate({
            opacity: '0'
        }, 1000);
        $('#container ul').animate({
            marginLeft: '-=100px'
        }, 1000);
        count++;
    }
});


$('#up').click(function () {
    if (count < ($chapters.length - 1) && count > 0) {
        $('#container ul').animate({
            marginLeft: '+=100px'
        }, 1000);
        $('#container').find("ul li:nth-child(" + count + ")").animate({
            opacity: '1'
        }, 1000);
        count--;
    }
});

<change your CSS according to this>


 #wrap {
 width:90%;
 }
 #container {
 height:100px;
 overflow:hidden;
 overflow-x: auto;
 overflow-y: no-content;
 margin-top:100px;
}
#container ul {
list-style:none;
padding:0px;
margin-top:0px;
}
#container ul li {
width:100px;
height:100px;
background-color:#666;
padding-left:1px;
margin-left:1px;
float: left;
}
.bars {
margin: 5px 5px 5px 5px;
}
.title-news {
color:#6ac4bb;
font-size:18px;
}
.date-news {
color:#a4a4a4;
font-size:12px;
}
.body-news {
color:#fff;
font-size:12px;
}

Upvotes: 1

Vishal Patel
Vishal Patel

Reputation: 973

Could you please try this...

$('#down').click(function () {
            if (count < ($chapters.length - 3)) {                
                $('#container ul').animate({ marginLeft: '-=100px' }, 1000);
                $('#container').find("#bar:nth-child(" + count + 1 + ")").animate({ opacity: '0' }, 1000);
                $('#container').width($('#container').width() - 70);
                count++;
            }
        });


        $('#up').click(function () {
            if (count < ($chapters.length - 1) && count > 0) {
                $('#container').width($('#container').width() + 70);
                $('#container ul').animate({ marginLeft: '+=100px' }, 1000);
                $('#container').find("#bar:nth-child(" + count + ")").animate({ opacity: '1' }, 1000);

                count--;
            }
        });

Upvotes: 0

Surender
Surender

Reputation: 757

just remove width property for container elements. In this case remove width for #wrap as more than one li can't fit in horizontally they are place vertically. If you want it to use horizontal scroll then you should set width for #container dynamically based on no of elements.

Upvotes: 0

Related Questions