0

我正在尝试使用 jQuery 创建一个效果，当鼠标悬停在页眉中我的姓名首字母时，它们所在的 div 会展开（使用 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/
4

4 回答 4

4

这是一个使用 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;
}

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

于 2013-07-13T06:43:26.660 回答
2

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

  1. 首先“显示”它们，以将它们设置为可见
  2. 然后使用 jQuery.position() 定位它们（​​在你的“启动”div 旁边）；
  3. 设置动画。

本质上，您希望它们“绝对”以避免它们插入/退出并改变您现有的流程。position()必须在使元素可见后调用，然后你应该有适当的开始条件来启动你的动画。

或者您可以尝试使用<span>'传入文本和/或显示为inline-block，这可能有助于避免“传入”将事情踢下一行。HTH。

于 2013-07-13T05:01:02.497 回答
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

于 2013-07-13T06:15:52.483 回答
1

我认为您正在寻找的是这样的：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;
}

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

问候，

于 2013-07-13T06:09:45.640 回答