Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2014, 19:21
Аспирант
Отправить личное сообщение для Lodas Посмотреть профиль Найти все сообщения от Lodas
 
Регистрация: 09.02.2011
Сообщений: 33

как сделать плавное движение Jquery.animate
Здравствуйте. есть список html:
<ul id="carusel">
<li>товар1</li>
<li>товар2</li>
<li>товар3</li>
<li>товар4</li>
<li>товар5</li>
</ul>

Сделал карусель товаров с помощью функции animate(выводит по 4, по мере выполнения скрипта скрывает крайний товар/сдвигает товары в лево/добавляет товар).
$(document).ready(function() { 
setInterval(function () {
        var marquee = $('#carusel');
        marquee.animate({scrollLeft:marquee.children(':first').width()}, {
            duration :'slow', 
            easing: 'linear',
            complete : function() {
                marquee.scrollLeft(0).children(':first').appendTo(marquee);
            }
        });
    }, 5000);
});

Все работает, но никак не получается сделать это плавно.Свойство easing: 'linear' не помогло. Подскажите пожалуйста как плавно сделать скрытие/добавление товара плавным?
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2014, 20:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Lodas,
а css ?
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2014, 00:00
Аспирант
Отправить личное сообщение для Lodas Посмотреть профиль Найти все сообщения от Lodas
 
Регистрация: 09.02.2011
Сообщений: 33

рони, не совсем понял вопрос, зачем там каскадные таблицы стилей?
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2014, 01:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Lodas,
чтобы понять что вы двигаите?
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2014, 14:07
Аспирант
Отправить личное сообщение для Lodas Посмотреть профиль Найти все сообщения от Lodas
 
Регистрация: 09.02.2011
Сообщений: 33

рони, внутри <ul> я двигаю элементы <li> которые в нем находятся. Решение как двигать плавно я все таки не нашел, может подскажете что я делаю не так?
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2014, 14:27
Аватар для Tek
Tek Tek вне форума
Профессор
Отправить личное сообщение для Tek Посмотреть профиль Найти все сообщения от Tek
 
Регистрация: 22.02.2012
Сообщений: 212

рони имеет ввиду используйте css3 анимации или js библиотеки которые их используют (например TweenMax)
Ответить с цитированием
  #7 (permalink)  
Старый 19.05.2014, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Lodas,
без css у вас рабочая строка только 8
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2014, 21:09
Аспирант
Отправить личное сообщение для Lodas Посмотреть профиль Найти все сообщения от Lodas
 
Регистрация: 09.02.2011
Сообщений: 33

рони, из библиотек использую только jquery, TweenMax и другие в данном куске кода не используются. рони, а как нужно правильно сделать, так чтобы заработала не только 8 строка кода?
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2014, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Lodas,
покажите css вашего блока
Сообщение от Lodas
<ul id="carusel">
Ответить с цитированием
  #10 (permalink)  
Старый 19.05.2014, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Простейшая карусель на jquery
Lodas,
не хотите тайну выдавать, тогда дальше сами
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;
  }
  #carusel {
    position:relative; top: 0px; left:0px; display:block;
    width: 500px; height:50px;
    padding: 0px; margin: 0px;
  }
  div{
     overflow:hidden; width: 400px; height:50px; position: relative; left: 100px
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
    function go() {
        $('#carusel').delay(3000).animate({
            left: '-=100'
        }, 2000, function () {
            $('li:first').appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
})
  </script>
</head>

<body>
<div>
		<ul id="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;">2</li>
			<li  id = "3" style="background-color:Yellow;">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
	</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 20:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать постоянную проверку на javascript alb Общие вопросы Javascript 18 09.01.2010 14:05