Горизонтальная анимация в JQuery

Я делаю раздел предстоящих событий на своем веб-сайте, но я не могу понять, как правильно это сделать, вот что я смог сделать. JQuery here.Горизонтальная анимация в JQuery

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>

Что происходит здесь в том, что li «s являются анимируемого по вертикали. Я хочу анимировать его горизонтально. Я слабый в HTML/CSS Я просто не мог даже сделать li переполнением по горизонтали. Благодарим за помощь заранее. :)

источник

2013-11-11 Asim

Пожалуйста, создайте [jsfiddle] (http://jsfiddle.net) в будущем: вот то, что я сделал для вас: http://jsfiddle.net/VRm4a/1/ – naththedeveloper

Спасибо! Я не знал об этом. – Asim

попробовать это пожалуйста, это работает ..: 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; 
}

источник

2013-11-11 12:32:17 Sindhu

просто удалите свойство ширины для элементов контейнера. В этом случае снимите ширину для #wrap , так как более одного li не может поместиться горизонтально, они расположены вертикально. Если вы хотите использовать горизонтальную прокрутку, тогда вы должны установить ширину для #container динамически, основанной на отсутствии элементов.

источник

2013-11-11 11:32:18 Surender

Спасибо за хорошее предложение :) но это не то, о чем я прошу. Я хочу изменить эту вертикальную анимацию на горизонтальную анимацию. – Asim

Не могли бы вы попробовать это ...

$('#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--; 
      } 
     });

источник

2013-11-11 11:37:36

да! это то, что мне нужно, но я также сталкиваюсь с некоторыми проблемами CSS, если вы можете помочь сделать лили переполнения горизонтально, я был бы вам признателен :) – Asim

Я попробую и вернусь к вам ... –

Горизонтальная анимация в JQuery

ответ

Смежные вопросы