反向CSS3转换

我想知道如何反转动画？当您将鼠标悬停在左侧的每个导航项目上时，您会注意到当您将鼠标悬停在下一个项目上时，黑色条只是夹在左上角，而不是向左滑动。我怎样才能让它像滑入一样滑出

黑色条是一个

标记，当在悬停时应用

activeSlide

类，然后在下一次悬停时将其删除时，该标记会附加到每个导航项

jQuery：

$(document).ready(function () {
    function activateItem(index) {
        $('#slideshow-nav').children('li').each(function (i) {
            var $item = $(this);
            if (i == index) {
                if ($item.children('a').length == 0) {
                    $item.append('<a href="#">' + titles[i] + '</a>');
                }
            } else {
                $item.children('a').hide(400, function() {
                    $item.children('a').remove();
                });
            }
        });
    }

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle({
        fx:         "scrollVert",
        rev:            "scrollVert",
        speed:          600,
        timeout:        0,
        pagerEvent:     "mouseover",
        pager:          "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li><span>" + titles[index] + "</span></li>";
        },
        onPagerEvent: function (index) {
            activateItem(index);
        }
    });
    activateItem(0);
});

---

请参阅下面代码中的重要部分，我认为您只需要将计时添加到

.remove（）

$(document).ready(function () {
    function activateItem(index) {
        $('#slideshow-nav').children('li').each(function (i) {
            var $item = $(this);
            if (i == index) {
                if ($item.children('a').length === 0) {
                    $item.append('<a href="#">' + titles[i] + '</a>');
                }
            } else {
                    $item.children('a').remove('slow'); // <-----Important bit
            }
        });
    }

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle({
        fx:         "scrollVert",
        rev:            "scrollVert",
        speed:          600,
        timeout:        0,
        pagerEvent:     "mouseover",
        pager:          "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li><span>" + titles[index] + "</span></li>";
        },
        onPagerEvent: function (index) {
            activateItem(index);
        }
    });
    activateItem(0);
});

$（文档）.ready（函数（）{
功能激活项（索引）{
$（'#幻灯片导航'）。子项（'li'）。每个（函数（i）{
变量$item=$（此项）；
如果（i==索引）{
如果（$item.children（'a'）。长度==0）{
$item.append（“”）；
}
}否则{
$item.children（'a'）。remove（'slow'））；//发布设置
activeSlide
activeSlide
的代码是jQuery循环插件的一部分。它应用于当前幻灯片的相应导航项。我不知道该告诉你什么。尝试不使用该插件，它可能会以中断CSS转换的方式悄悄修改DOM。这就是为什么过时的jQuery插件真的很糟糕。你应该能够在你的滚动照片查看器上使用与菜单上的黑色滑块类似的CSS逻辑。它没有过时，它在GitHub上被积极维护，最近一次更新是在2个月前。动画可以反转，可能是用jQuery，但不确定如何做。我更新了P使用我当前的代码，当鼠标悬停在下一个导航项上时，在
标记上设置
.remove（）
动画，但它需要向左滑动而不是挤压。我很高兴你能让它工作。我在Chrome中查看了，动画确实使用了CSS转换（而不是jQuery/JS在循环中设置DOM）看来good@Eli这发生在我们最好的人身上。
$(document).ready(function () {
    function activateItem(index) {
        $('#slideshow-nav').children('li').each(function (i) {
            var $item = $(this);
            if (i == index) {
                if ($item.children('a').length === 0) {
                    $item.append('<a href="#">' + titles[i] + '</a>');
                }
            } else {
                    $item.children('a').remove('slow'); // <-----Important bit
            }
        });
    }

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle({
        fx:         "scrollVert",
        rev:            "scrollVert",
        speed:          600,
        timeout:        0,
        pagerEvent:     "mouseover",
        pager:          "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li><span>" + titles[index] + "</span></li>";
        },
        onPagerEvent: function (index) {
            activateItem(index);
        }
    });
    activateItem(0);
});