Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


scrollLeft animate (jQuery)

Для плавной прокрутки скролла по горизонтали какого-либо элемента в jQuery используется функция .animate(properties [, duration] [, easing] [, complete]).

Пример

Например есть <div> с горизонтальной прокруткой и кнопка при нажатии на которую нужно плавно прокрутить скролл на 100 пикселей.

Смотреть онлайн-пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>scrollLeft animate (jQuery)</title>

<style type="text/css">
.main {width:600px; height:220px; overflow:auto; border:#CCC 1px solid;}
.inner {height:200px; width:1000px;}
</style>

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#btn').click(function(){
        
        $('#main').animate({
            scrollLeft: '+=100',
        }, 1000function() {
            //код по завершении анимации
        });
        
    });
    
    $('#reset').click(function(){
        $('#main').animate({
            scrollLeft: '0px',
        }, 'slow'function() {
            //код по завершении анимации
        });
    });
    
    
});

</script>

</head><body>

<div id="main" class="main"><div class="inner">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div></div>

<br><input type="button" id="btn" value="Плавно проскроллить на 100 пикселей"> <input type="button" value="В начало" id="reset">

</body></html>
Опубликовано: 29 января 2012  ·  Автор: Артём Фёдоров  ·  5442 просмотра

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryscrollLeft animate (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

jQuery, Библиотеки, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания