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()

添加时序

<强> Working Example

$(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);
});

反向CSS3过渡

1 个答案: