javascript - 尝试使用 jQuery 在鼠标悬停在首字母上时淡出和滑出文本

Question

我正在尝试使用 jQuery 创建一种效果，当鼠标悬停在页面页眉的首字母上时，它们所在的 div 会展开(使用 jQuery animate)并且我的全名文本会从每个首字母中淡入.

我尝试了多种方法，但不确定哪种方法最好。我有点卡住了。我目前正试图通过在两个单独的 div 中使用我名字的首字母“OW”，然后在这些首字母之间使用我名字的其余部分来组成“wen”和“illiams”来实现它。像这样:

    <div class="initialF inlinediv">O</div>
    <div class="fullF inlinediv">wen</div>
    <div class="initialL inlinediv">W</div>
    <div class="fullL inlinediv">illiams</div>

我认为使用 jQuery slideLeft 和 .fadeIn 可以让文本从左侧滑入并淡入淡出看起来像文本从首字母出现，但动画跳动，会继续到第二个当 div 仍在扩展时。我正在使用下面的 jQuery 来检测 mouseIn/Out 事件:

<script>
$(".brand").mouseenter(function() {
$('.brand').animate({width: '160px'});
$('.fullF').fadeIn("slow");
});

$(".brand").mouseout(function() {
$('.brand').animate({width: '36px'});
$('.fullF').fadeOut("slow");
});
</script>

我尝试过的替代方案是使用 jquery.lettering.js 来帮助解决这个问题，但似乎存在一些问题。任何将我推向正确方向的建议都会很有用，我的网站有一个部分工作的例子:

http://192.241.203.146/

Answer 1

这是一个使用 css transitions 而不是 jquery animate 的例子:http://jsfiddle.net/S58Se/2/

<div class='branding'>    
    <span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
    <span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>

span {
    display: inline-block;
    overflow: hidden;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

.wen { width: 36px; }
.illiams { width: 160px; }

span.hidden {
    width: 0px;
    opacity: 0;
}

$('.branding').hover( 
    function() { $('.nameFull').removeClass('hidden'); },
    function() { $('.nameFull').addClass('hidden'); }
);

或者你可以完全取消 javascript:http://jsfiddle.net/S58Se/3/ 删除 js 并添加这些 css 语句:

.branding:hover .wen {
    width: 36px;
    opacity: 1;
}
.branding:hover .illiams {
    width: 160px;
    opacity: 1;
}

...只是因为我认为它很整洁。