隐藏的jQuery标题

我打了一个砖头墙的想法，我有一个标题，因为我不知道'效果'被称为什么;即使我已经看到它加载的时间。隐藏的jQuery标题

我的想法是有一个隐藏的标题，当用户将光标放在屏幕的顶部时，它会下降。与Windows 8菜单类似，将光标放在屏幕的角落时会出现该菜单。

如果有人能指出我在正确的方向，我会很感激。

来源

2012-12-07 Steven_Harris_

哪个角落？魅力菜单或任务切换器？ –

http://www.whathaveyoutried.com通常，您可以在屏幕顶部隐藏div，并在悬停事件期间将其滑入到位。 –

@Jay Blanchard我很欣赏你提供的链接，但我只是要求指出正确的方向，而不是完整的工作解决方案。 –

我会做这样的事情：http://jsfiddle.net/V9Cfn/2/

$(window).on('mousemove', function (e) { 
    if (e.pageY < 100) { 
     $("#showtop").slideDown(); 
    } 
    else { 
     $("#showtop").slideUp();   
    } 
});

本质鼠标是否足够接近顶部，显示div的问题，你有固定的顶端。

来源

2012-12-07 16:27:14

感谢您的回答，似乎两种方式都可行！我试试看，哪一个最适合我！ –

你可以使用animate()，而不是滑动格下来（使用slideDown或slideToggle），实际上把整个DIV

http://jsfiddle.net/F6FRC/3/

<div class="wrapper"> 
    <div class="header"> 
     Shazam! 
    </div> 

    <div class="trigger"> 
    </div> 
</div> 

$(function(){ 
    $(".trigger").mouseenter(function(){ 
     $('.header').animate({ 
      top: '0px', 
      }, 500, function() { 
     }); 
    }).mouseleave(function(){ 
     $('.header').animate({ 
      top: '-20px', 
     }, 500, function() { 
     }); 
    }); 
}); 



.wrapper {position:relative;} 
.header {background-color: #F00; position:absolute; height: 20px; width: 100%; top: -20px; left: 0px;} 
.trigger {height: 50px; width: 100%; border: 1px solid #EFEFEF;}

来源

2012-12-07 16:31:09

谢谢你，现在有道理！我有修补，并使其符合我的需求。 –

隐藏的jQuery标题

回答

相关问题