Пользовательский интерфейс Jquery: эффект отрицательного среза - PullRequest
Новая
       2

Пользовательский интерфейс Jquery: эффект отрицательного среза

0 голосов
/ 20 марта 2012

Вот мой код 

$(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 и узел расположены благодаря отрицательной марже и абсолютной позиции.

Как я могу решить проблему, которую я уже пытался добавить к моему селектору свойство overflow: visible в css и javascript, используя jquery во время вызова функции, но ни одно из этих решений не сработало.

Вспомогательная проблема: Кстати, направление слепых эффектов не работает (что должно было быть исправлено), как я могу это исправить, не загружая всю библиотеку 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;
}

Большое спасибо за чтение :-) Хорошего дня: -)

...