使用jQuery在鼠标悬停时尝试淡入淡出和滑出首字母

Question

我正在尝试用动画来创建一种效果，当鼠标移到页眉中我的首字母时，它们所在的div会展开(使用jQuery jQuery )，我的全名文本会从每个首字母淡入。

我尝试过各种方法，但不确定最好的方法是什么。我有点卡住了。我目前正在尝试通过将我名字的首字母"OW“放在两个单独的div中，然后将我名字的其余部分组成"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

这样做的一个好方法是通过向传入的对象添加另一个属性来扩展对动画方法的调用的使用。因此，无需调用额外的方法(fadeIn)，您只需一举处理所有这些操作：

$('.brand').on({
  'mouseenter' : function () {
    $('.nameFull').stop().animate({
      'width' : '200px',
      'opacity' : '1'
    }, 500);
  },
  'mouseleave' : function () {
    $('.nameFull').stop().animate({
      'width' : '0',
      'opacity' : '0'
    }, 500);
  }
});

您会注意到，我还使用了'on‘而不是'hover’或'mouseenter‘和'mouseleave’方法。在最新版本的jQuery中，这些方法只是引用'on'，所以最好去掉中间人，在一个地方做所有的事情。

我不确定这是否完全适合您的设计，但我做了一个Codepen来演示代码的实际应用：http://codepen.io/Tristan-zimmerman/pen/lnDGh

Answer 2

下面是一个使用css转换而不是jquery动画的例子：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;
}

..。就因为我觉得它很整洁。

Answer 3

设置隐藏的div position:absolute的样式，并在何时显示它们：

使用jQuery.position();

• set

1. to .

，首先显示它们，将它们设置为可见，然后定位它们(在你的‘启动’div旁边)。

从本质上讲，你想要他们“绝对”，以避免他们进入/退出&改变你现有的流程。必须在使元素可见之后调用position()，然后您应该具有适当的启动条件才能启动动画。

或者，您可以尝试对传入的文本使用<span>'和/或显示为inline-block，这可能有助于避免“传入”错误。HTH。