javascript - 悬停时的 Jquery 幻灯片动画

Question

我正在尝试在我的公司 Logo 上实现 Jquery 悬停功能。我想实现这个:

但是，我已经实现了THIS

我使用了以下逻辑:

$(".m1").hover(function() {
        dir = !dir;
        r = dir? -50 : 0;
        t = dir? 50 : 0;

        $(".slide").stop().animate({left: r+'px'}, 300);

    });

你可以在这里查看我的 JS Fiddle:http://jsfiddle.net/Jiteen/xZ6Hv/感谢任何形式的帮助或建议。

Answer 1

以下作为起点如何？无需 JS!

Demo Fiddle

HTML

<div>
    <div href="#" class="word" data-text="edia">M</div>
    <div href="#" class="word" data-text="antra">M</div>
</div>

CSS

.word {
    display:inline-block;
    font-size:1em;
    line-height:1;
    position:relative;
    font-size:50px;
}
.word:first-child {
    color:orange;
}
.word:last-child {
    color:grey;
}
.word:after {
    content:attr(text);
    position:relative;
    display:inline-block;
    overflow:hidden;
    max-width:0;
    color:black;
    font-size:20px;
    transition:max-width .5s ease-in;
}
div:hover .word:after {
    max-width:40px;
}