Question

这是我的代码

$(document).ready(function(){

    $(".feat").click(function () {    
        $('#ftline1').show("blind", { direction: "left" }, 2000, call);
    });

    function call() {
        $('#ftline2').show("blind", { direction: "up" }, 2500, call2);
    };

    function call2() {
        $('#node').show("blind", { direction: "left" }, 1500);               
    };

});

当我在运行效果时在标题中解释，div被部分切割，我的工作的视觉方面是一团糟。 ftline1,2和节点位于负边距和绝对位置。

我如何解决我已经尝试在函数调用时使用jquery在css和javascript中添加overflow：visible属性到我的选择器的问题，但这些解决方案都不起作用。

辅助问题：顺便说一句，盲目效果方向不起作用（这是一个应该修复的问题）如何在不加载整个jqueryUI库的情况下修复它（我的意思是继续使用jqueryUI.MIN.js）？

编辑：

这是我的HTML代码：

<div id="header">
    <div id="logo"><img src="image/erus.png" />
    </div>
    <div id="menuu">
    <ul class="lavaLampBottomStyle" id="menu">
        <li><a href="#">Erus</a></li>
        <li  class="current feat"><a href="#">Features</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Shop</a></li>
</ul>
    </div>
    <div id="ftline1"></div>
    <div id="ftline2"></div>
    <div id="node"></div>
</div><!-- End header-->

我删除了有点多余的菜单部分。这是我有趣部分的CSS代码：

#header{
    margin-top:7px;
    width:800px;
    height:140px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}

#ftline1{
    position:absolute;
    height:60px;
    width:400px;
    background-image:url(../image/line1.png);
    background-repeat:no-repeat;
    margin-top:110px;
    margin-left:-140px;
    z-index:-10;
    display:none;
}

#ftline2{
    position:absolute;
    height:900px;
    width:400px;
    background-image:url(../image/line2.png);
    background-repeat:no-repeat;
    margin-top:195px;
    margin-left:-153px;
    z-index:-10;
    display:none;
}

#node{
    position:absolute;
    height:175px;
    width:100px;
    background-image:url(../image/node.png);
    background-repeat:no-repeat;
    margin-top:395px;
    margin-left:-87px;
    z-index:-10;
    display:none;
}

非常感谢阅读:-)祝你好运： - ）

Jquery UI：负边距削减div效果

0 个答案: