Question

我的菜单如下：

<nav>
    <a href="#">
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="#">
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="#;">
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="#">
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="#">
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

活动菜单项为红色。当用户点击链接时，红色应该从活动菜单项开始，同时点击的链接应该从左到右变为红色。

这是一个 fiddle 来向您展示我的意思。单击第二个链接，然后点击第三个链接以查看效果。

如果你从左到右，点击的链接会变得很漂亮，但是初始的红色文字会向右移动，而不是只移动颜色。

我该怎么做才能修复这种效果？
如何才能使这个效果向左方向工作？

欢迎任何建议。

修改
为了清楚起见：我希望this effect，但在文字上。如果您将鼠标从左向右移动到第一行，您将看到效果。我想点击，而不是悬停。

有两种情况：

点击活动链接右侧的菜单项 - ＆gt;颜色效果应该是正确的。
点击活动链接左侧的菜单项 - ＆gt;颜色效果应该左转

Answer 1

也许你的意思是：http://jsfiddle.net/t1w4gy0w/3/

针对这两种方式进行了更新：http://jsfiddle.net/t1w4gy0w/4/

如果用户快速按下，则会略有改善：http://jsfiddle.net/t1w4gy0w/5/

$('.blackholder').parent().on('click', function(event) {

    if ($(this)[0] === $('.red.active').parent()[0]) {
        return;
    }

    var animFull = function (obj) {
        obj.addClass('top').finish()
        .css('width', '0').animate({ width: '100%'}, {
            duration: 1000,
            queue: false,
            complete: function () {
                $(this).removeClass('top');
            }
        });
    };

    var moveRight = function (atag) {
        animFull(
            $('.red.active').removeClass('active').siblings('.black')
        );

        animFull(
            $(atag).children('.red').addClass('active')
        );
    };

    var animZero = function (obj) {
        obj.addClass('top').finish()
        .animate({ width: '0'}, {
            duration: 1000, queue: false,
            complete: function () {
                $(this).removeClass('top').css('width', '100%'); 
            }
        });
    };

    var moveLeft = function (atag) {
        animZero(
            $('.red.active').removeClass('active')
        );

        $(atag).children('.red').addClass('active');
        animZero(
            $(atag).children('.black')
        );
    };

    if ($('.red.active').parent().position().left < $(this).position().left) {
        moveRight(this);
    } else {
        moveLeft(this);
    }

});

.blackholder {
    color: #000;
}
.black.top, .red.top {
    z-index: 3;
}
.black {
    z-index: 1;
    color: #000;
    left: 0;
    position: absolute;
}
.red {
    color: red;
    left: 0;
    position: absolute;
}
.red.active {
    z-index: 2;
}

<nav>
    <a href="javascript:void(0);">
        <span class="blackholder">Home</span>
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Longer menu item</span>
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Two words</span>
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">About</span>
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Contact</span>
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

如果您需要进行任何更改，例如我在代码中添加注释，请随时发表评论。

Answer 2

这是你要找的东西，从红色到黑色，从黑色到红色http://jsfiddle.net/t1w4gy0w/2/

$('.black').on('click', function (event) {
    $('.red').animate({
        width: 0
    }, {
        duration: 1000,
        queue: false
    }).removeClass('active');
    $(this).parent().find('.red').addClass('active').animate({
        width: '100%'
    }, {
        duration: 1000,
        queue: false
    });
});

并更改CSS

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

Answer 3

也许

$('.black').on('click', function(event) {
    $('.red').css({'width': 0}).removeClass('active');
    $(this).siblings('.red').addClass('active').animate({ width: '100%'}, {
        duration: 1000,
        queue: false
    });
});

如果你想让你的颜色向左滑动，试着向左移动.red，它会看起来像 width = 0 到右边角落

菜单文字颜色移动效果

3 个答案: