Question

我试图用jQuery创建一个效果，在标题的页面上将鼠标悬停在我的首字母缩写上，它们所在的div扩展（使用jQuery动画）并且我的全名文本从每个首字母。

我尝试过各种各样的事情，但不确定最好的方法是什么。我有点卡住了。我现在正试着通过我的名字的首字母和＃34; OW＆＃34;在两个单独的div中，然后我的名字的其余部分组成＆＃34; wen＆＃34;和＆＃34;威廉姆斯＆＃34;在那些初始之间。像这样：

    <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

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

首先'显示'它们，将它们设置为可见
然后使用jQuery.position（）;
设置动画。

基本上你希望他们'绝对'避免他们进出/关闭他们改变你现有的流量。在使元素可见之后必须调用position()，然后您应该有适当的开始条件来启动动画。

或者您可以尝试使用<span>'作为传入文本和/或显示为inline-block，这可能有助于避免“传入”将某些内容踢到一条线上。 HTH。

Answer 2

解决这个问题的一个好方法是通过向传入的对象添加另一个属性来扩展对动画方法的调用。所以不要调用额外的方法（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 3

这是一个使用css过渡而不是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;
}

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

Answer 4

我认为你要找的是这样的： JSFiddle

HTML：

<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>

JQ：

$('.brand').hover(function(){
    $(this).stop().animate({width: '160px'},'slow',function(){
        $(this).children('div').children('.full').stop().fadeIn('slow');
    }); 
},function(){
    $(this).children('div').children('.full').stop().fadeOut('slow',function(){
        $(this).parent().parent().stop().animate({width: '36px'},'slow');
    });
});

的CSS：

.full{
    display: none;
}

注意：在特定情况下会发生一个简单的错误，我正在研究它。

的问候，

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

4 个答案: