Question

我有一个时间表，如果班级没有活动来改变从活动年份移动的每一对的css，则需要时间表。情况就是这样。

...
n-4
n-3
n-2
n-1
n (active year)
n+1
n+2
n+3
n+4
...

这是我尝试的但是按索引

  $frame.sly(`on`, `active`, function (event) {
 $(`.years.active`).css(`opacity`,`1`);
 $(`.years.active`).siblings().eq(1).css(`opacity`,0.9`);
 $(`.years.active`).siblings().eq(2).css(`opacity`,`0.8`);
 $(`.years.active`).siblings().eq(3).css(`opacity`,`0.7`);
 $(`.years.active`).siblings().eq(4).css(`opacity`,`0.6`);
}

HTML

<div class="pagespan container">
    <div class="wrap">
        <div class="frame" id="forcecentered">
            <ul class="clearfix">
                <li data-target="1997" class="years">1997</li>
                <li data-target="2009" class="years">2009</li>
                <li data-target="2010" class="years">2010</li>
                <li data-target="2013" class="years active">2013</li>
                <li data-target="2015" class="years">2015</li>
                <li data-target="2016" class="years">2016</li>
                <li data-target="2017" class="years">2017</li>
            </ul>
        </div>
    </div>
</div>

任何人都知道这样做的方式。也许有数据目标？我希望能够实现从活跃的每一步开始的字体和不透明度

Answer 1

使用属性来跟踪级别：

function moveForward() {
    $(“.before”).each(function() {
        $(this).attr(“data-pos”, $(this).attr(“data-pos”) + 1);
    }
    $(“.after”).each(function() {
        $(this).attr(“data-pos”, $(this).attr(“data-pos”) - 1);
    }
    $(“.active”).toggleClass(“active before”).attr(“data-pos”, 1);
    $(“.after[data-pos=‘0’]”).toggleClass(“after active”);
}

function moveBack() {
    $(“.before”).each(function() {
        $(this).attr(“data-pos”, $(this).attr(“data-pos”) - 1);
    }
    $(“.after”).each(function() {
        $(this).attr(“data-pos”, $(this).attr(“data-pos”) + 1);
    }
    $(“.active”).toggleClass(“active after”).attr(“data-pos”, 1);
    $(“.before[data-pos=‘0’]”).toggleClass(“before active”);
}

当然你可以多次调用它们（或修改它们）来改变多个条目，并跟踪变量中的位置以允许“转到位置”功能。

然后你的css：

/* any pos greater than 9 */
.before, .after {
    opacity: 0;
}

/* these selectors should be sufficient because ‘.active’ will always have no ‘data-pos’ or will have a ‘data-pos’ of 0 */
[data-pos=‘1’] {
    opacity: 0.9;
}

[data-pos=‘2’] {
    opacity: 0.8;
}
/* values 3-9 here */

并确保您的html正确预设，例如

<div class=“before” data-pos=“2”/>
<div class=“before” data-pos=“1”/>
<div class=“active”/>
<div class=“after” data-pos=“1”/>
<div class=“after” data-pos=“2”/>
<div class=“after” data-pos=“3”/>
<div class=“after” data-pos=“4”/>

Answer 2

如果我理解正确，你想要将 LI 的不透明度从活动的那个减少到最后。如果是这种情况，则代码段为：

＆＃13;

var elements = $('.years.active').nextAll('.years').andSelf();
var step = 1 / (1 + elements.length);
var startValue = 1;
elements.each(function(idx, ele) {
    startValue = startValue - 0.1;
    console.log('New opacity is (li:' + ele.textContent + '):' + startValue);
    $(ele).css('opacity',startValue);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="pagespan container">
    <div class="wrap">
        <div class="frame" id="forcecentered">
            <ul class="clearfix">
                <li data-target="1997" class="years">1997</li>
                <li data-target="2009" class="years">2009</li>
                <li data-target="2010" class="years">2010</li>
                <li data-target="2013" class="years active">2013</li>
                <li data-target="2015" class="years">2015</li>
                <li data-target="2016" class="years">2016</li>
                <li data-target="2017" class="years">2017</li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

在滚动条

2 个答案: