Question

大家好，我已经尝试过你给我的东西......但是我做错了什么看到我的小提琴

 body {

position: relative;
min-height: 3000px;
margin: 0;
padding: 0;
top: 0;
font-family:'proximanova-regular', sans-serif;
 }

当您将鼠标悬停在右上方按钮上时，silde会保持闪烁，而不是像我想要的示例http://yahoo.tumblr.com/

Answer 1

将 mouseleave 处理程序修改为不使用#follow，而是使用内容面板本身。

另外，执行:animated检查以确保在内容面板完全显示时不会激活mouseleave。

演示： http://jsfiddle.net/Ej5k8/2/

<强>代码：

$("#panel-content").mouseleave(function () {
    if(!$("#panel-content").is(':animated')) {
        $("#panel-content").show();
        $("#panel-content").animate({
            width: '0px'
        }, 'fast');
    }
});

Answer 2

您需要在mouseleave而不是#panel-content按钮上应用#follow以避免闪烁。

Here's the updated fiddle

Answer 3

尝试：

$("#panel-content").hide();
$("#follow").mouseenter(function () {
    $("#panel-content").show();
    $("#panel-content").animate({
        width: '300px'
    }, 'slow');
});
$("#panel-content").mouseleave(function () {
    $("#panel-content").show();
    $("#panel-content").animate({
        width: '0px'
    }, 'slow');
});

Updated fiddle here.

悬停时右侧面板闪烁

3 个答案: