javascript - 从触发器导航到 ".hover"动画元素后，将其保留在屏幕上

Question

我希望我的标题不要太长，这也是我的第一个问题，所以请耐心等待。

因此，我的 .navicons div 中有一组 div，我想将它们用作屏幕外元素(#wdFoot、#wpFoot、#gdFoot)的触发器，以便在悬停时从屏幕底部升入 View 。到目前为止，我使用 .hover 和 .animate 实现了这种效果，但为了可用性，当用户将鼠标从触发区域移动到刚刚具有的实际脚元素时，我希望动画页脚元素保持凸起或在屏幕区域中。升入屏幕 View 。

这是我到目前为止所拥有的。

<div class="navicons">
    <div id="wdicon"><!-- trigger divs  -->
        Wd
    </div>
    <div id="wpicon">
        Wp
    </div>
    <div id="gdicon">
        Gd
    </div>
</div>

<section id="wdFoot"class="footNav"><!-- after they appear on the screen I want these to stay visible when the user moves the mouse from the triggers to this area  -->
    <h2>Wd Foot</h2>
</section>

<section id="wpFoot"class="footNav">
    <h2>Wp Foot</h2>
</section>

<section id="gdFoot"class="footNav">
    <h2>Gd Foot</h2>
</section>

CSS//

body{
    overflow:hidden;
}
div.navicons{
    width:auto;
    position:absolute;
    margin:0 auto;
  }
.navicons > div{
    width:80px;
    height:80px;
    border:2px solid rgba(178,178,178,.08);
    border-radius:50%;
    text-align:center;
    display:inline-block;
    transition:all .05s;
}
.navicons > div:hover{
    border:2px solid #1f88e1;
}
section.footNav{
  width:100%;
  height:240px;
  background-color:rgba(51,51,51,.7);
  position:absolute;
  bottom:-240px;
}

jQuery//

$( '#wdicon' ).hover(function() {
     $( "#wdFoot" ).animate({'bottom':'0'}, 500);
  },function(){
     $("#wdFoot").animate({'bottom':'-240px'}, 500);
  });

$( '#wpicon' ).hover(function() {
     $( "#wpFoot" ).animate({'bottom':'0'}, 500);
  },function(){
     $("#wpFoot").animate({'bottom':'-240px'}, 500);
  });

$( '#gdicon' ).hover(function() {
     $( "#gdFoot" ).animate({'bottom':'0'}, 500);
  },function(){
     $("#gdFoot").animate({'bottom':'-240px'}, 500);
  });

这是我的 fiddle.

另外，我确信有一种更简单或更短的方法来编写我的 jQuery，所以请随时告诉我。

谢谢

Answer 1

这是一个可能的选择。这完全取决于什么操作会导致页脚被删除。在此示例中，页脚将保持可见至少 1 秒，为用户提供足够的时间将光标移动到页脚上。一旦越过页脚，将光标移开将立即将其关闭。正如我在此处所做的那样，可以使用 setTimeout 函数实现其他方法。

首先，我决定使用 data 属性来消除多次 hover 调用的需要:

<div class="navicons">
    <div id="wdicon" data-hover="wdFoot">
        Wd
    </div>
    <div id="wpicon" data-hover="wpFoot">
        Wp
    </div>
    <div id="gdicon" data-hover="gdFoot">
        Gd
    </div>
</div>

<section id="wdFoot"class="footNav">
    <h2>Wd Foot</h2>
</section>

<section id="wpFoot"class="footNav">
    <h2>Wp Foot</h2>
</section>

<section id="gdFoot"class="footNav">
    <h2>Gd Foot</h2>
</section>

然后我使用 setTimeout 将关闭动画延迟 1 秒(1000 毫秒)。

var dismissTimeout;

var dismiss = function($group) {
    $group.animate({'bottom':'-240px'}, 500);
};

$( '[data-hover]' ).hover(function() {
    $(".footNav").stop().css('bottom':'-240px');
    $( "#" + $(this).data("hover") ).stop().animate({'bottom':'0'}, 500);
},function(){
    dismissTimeout = setTimeout(function() {
        dismiss($("#" + $(this).data("hover") ));
    }.bind(this), 1000);
});

由于 dismissTimeout 变量位于外部范围内，因此可以在页脚上的 hover 事件处理程序中清除它:

$('.footNav').hover(function() {
    clearTimeout(dismissTimeout);
}, function() {
    dismiss($(this));
});

Try it in my fork of your fiddle .

要在悬停下一个元素时以动画方式关闭非事件页脚，只需将 css 调用替换为 animate:

 $(".footNav").stop().animate({'bottom': '-240px'}, 500);

这在version 5 of the fiddle中得到了证明。 .

对于与垂直移动一致的高度动画，请尝试 Version 6 。基本思想是在dismiss函数动画中添加返回正常高度:

var dismiss = function($group) {
    $group.stop().animate({'bottom':'-240px', 'height': '240px'}, 500);
};

然后将增加高度的动画添加到页脚hover处理程序:

$('.footNav').hover(function() {
    clearTimeout(dismissTimeout);
    $(this).animate({'height': '600px'}, 500);
}, function() {
    dismiss($(this));
});

您还会注意到版本 6 删除了两个 stop() 调用，因为它们最终可能会取消已经正在进行的解散动画，这不好。