Jquery UI : Negative margin cut div on effect

2019-08-23 10:14发布

问题:

Here is my code

$(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);               
    };

});

As explain in the title when I run the effect, the div is partially cut and the visual aspect of my work is a mess. The ftline1,2 and node are located thanks to negative margin and an absolute position.

How can I solve the problem I already tried to add overflow:visible property to my selector both in css and javascript using jquery at the time of the function call, but none of these solutions worked.

Subsidiary issue : By the way, the blind effects direction are not working (which was an issue supposed to be fixed) how can I fix it without loading the entire jqueryUI library (I mean keep using jqueryUI.MIN.js) ?

Edit :

Here is my HTML code :

<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-->

I deleted the menu part which is a bit redundant. Here is my CSS code for the interesting part :

#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;
}

Thanks a lot for reading :-) Have agood day :-)