反向CSS3过渡

Question

http://micheresources.com/html/j-crew-slider/

我想知道如何反转动画？ 当您将鼠标悬停在左侧的每个导航项目上时，您会注意到，当您将鼠标悬停在下一个项目上时，黑条只是捏到左上角，而不是向左滑动。 如何使其滑入类似于滑入？

黑条是<a>标记，当将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);
});

CSS：

#slideshow-nav li a {
    background-color: #000;
    width: 285px;
    margin-top: -1px;
    padding: 30px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    color: #fff;
    text-decoration: none;
    position: absolute;
    left: -285px;
    -webkit-transition: left 500ms ease;
    -moz-transition: left 500ms ease;
    -o-transition: left 500ms ease;
    transition: left 500ms ease;
}
    #slideshow-nav li.activeSlide a { left: 0; }

Answer 1

请参阅下面的代码中的重要部分，我想您只需要向.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);
});