Форум

Lodas · #1 (**permalink**) 18.05.2014, 19:21

Здравствуйте. есть список 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

Lodas,
а css ?

Lodas · #3 (**permalink**) 19.05.2014, 00:00

рони, не совсем понял вопрос, зачем там каскадные таблицы стилей?

рони · #4 (**permalink**) 19.05.2014, 01:16

Lodas,
чтобы понять что вы двигаите?

Lodas · #5 (**permalink**) 19.05.2014, 14:07

рони, внутри <ul> я двигаю элементы <li> которые в нем находятся. Решение как двигать плавно я все таки не нашел, может подскажете что я делаю не так?

Tek · #6 (**permalink**) 19.05.2014, 14:27

рони имеет ввиду используйте css3 анимации или js библиотеки которые их используют (например TweenMax)

рони · #7 (**permalink**) 19.05.2014, 14:40

Lodas,
без css у вас рабочая строка только 8

Lodas · #8 (**permalink**) 19.05.2014, 21:09

рони, из библиотек использую только jquery, TweenMax и другие в данном куске кода не используются. рони, а как нужно правильно сделать, так чтобы заработала не только 8 строка кода?

рони · #9 (**permalink**) 19.05.2014, 21:27

Lodas,
покажите css вашего блока

Сообщение от Lodas

рони · #10 (**permalink**) 19.05.2014, 21:57

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>

Форум

Справочник

Discord чат

Курсы javascript