Question

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

所以我在.navicons div中有一组div，我想用它作为屏幕截图元素的触发器（#wdFoot，＃wpFoot，＃gdFoot），以便在悬停时从屏幕底部进入视图。到目前为止我使用.hover和.animate有这个效果，但是为了实用性我希望当用户将鼠标从触发区域移动到刚刚有的实际脚元素时，动画页脚元素保持凸起或在屏幕区域中进入屏幕视图。

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

<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

首先，你绝对应该使用.stop()来防止动画在快速鼠标移动时累积。执行相同操作的较短方法 would be ：

$(".navicons [id$=icon]").hover(function( e ) {
    var pr = this.id.split("icon")[0];   // the ID prefix
    var mE = e.type==="mouseenter";      // is mouseenter?
    $("#"+ pr +"Foot" ).stop().animate({bottom: mE ? 0 : -240}, 500);
});

要保持元素打开，您不能简单地使用hover，您需要创建超时（如果您希望底部元素等待鼠标输入以取消该元素超时 - 但这完全取决于你想要实现的目标你没有明确解释）

由于您未请求任何超时：

当用户将鼠标从触发区移动到刚刚进入屏幕视图的实际脚元素时，我希望动画页脚元素保持凸起或在屏幕区域

<强> jsfiddle demo ：

var $activeFoot,

$(".navicons > div").add( $activeFoot ).hover(function( e ) {
    // If any active exists, animate-off
    if($activeFoot) $activeFoot.stop().animate({bottom: -240}, 500); 
    // Create a new active
    $activeFoot = $("#"+ this.id.split("icon")[0] +"Foot");
    // Animate-in the current active 
    $activeFoot.stop().animate({bottom: 0}, 500); 
});

Answer 2

这是一个可能的选择。这一切都取决于什么行为应该导致页脚被删除。在此示例中，页脚将保持可见状态至少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()次来电，因为他们最终可能会取消正在进行的解雇动画，这是不行的。

保持＆＃34; .hover＆＃34;从触发器导航到屏幕上的动画元素

2 个答案: