Question

我已经为显示/隐藏编码了一个项目列表，如https://jsfiddle.net/qbxtkyzu/所示。我尝试动画（滑入和滑出）相同的项目，而不是让它们弹出和弹出。

<div id="main">
    <div>
    Base Text /
    </div>
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
</div>

和javascript：

var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(5000).show(30, function() {
    $elem.eq(i % l).delay(5000).fadeOut(30, go);
    i++;
  })
}

go();

和css：

.trip { display: none}

Answer 1

show和fadeOut函数获取的第一个参数是运行动画的时间（以毫秒为单位）。

在你的情况下 - 你有30，这是30毫秒 - 非常快如果将其更改为（假设）1000，您将看到动画：

＆＃13;

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).delay(2000).show(1000, function() {
        $elem.eq(i % l).delay(2000).fadeOut(1000, go);
        i++;
    })
}

go();

＆＃13;

.trip { display: none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div>
    Born To /
    </div>
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
</div>

＆＃13;

Answer 2

我只是为此使用CSS过渡。所以

.trip{
  transition: opacity 1s;
  opacity: 0;
}

.trip.show{
  opacity: 1;
}

然后只需添加课程＆＃34; show＆＃34;这些元素而不是JS中的动画。

Answer 3

如果您正在寻找从左侧滑入的内容，您可以执行以下操作：

.wrapper {
  position: relative;
}

.trip { 
  transition: left 2s;
  position:absolute;
  left: -100%;
}

.trip.visible {
  left: 0;
}

https://jsfiddle.net/xs7b6hxe/

如何滑动或.anan中的多个项目？

3 个答案: