Форум

рони · #11 (**permalink**) 10.05.2021, 22:21

Сообщение от jurvrn

slideLeft/slideRight

хоть во все стороны сразу есть
https://api.jqueryui.com/slide-effect/

jurvrn · #12 (**permalink**) 11.05.2021, 10:50

рони,
сделал как понял, так как мануал короткий, и работает не так как надо (
https://jsfiddle.net/jurvrn/oqpktewn/14/
ещё пример сделал https://jsfiddle.net/jurvrn/oqpktewn/23/
и нашел вот это, это уже анимация https://www.tutorialrepublic.com/cod...d-right-effect
Но мне нужен такой эффект как уже у меня есть. То есть на hover закрепить слайд. Ну и чтобы срабатывал toggle когда hover пропадал

рони · #13 (**permalink**) 11.05.2021, 11:59

jurvrn,
без jquery-ui

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #toggle {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #ccc;
            left: calc(100% - 100px);
            overflow: hidden;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let direction = 0;
            $(document).click(function() {
                direction ^= 1;
                let options = direction ? {
                    width: "-=100px",
                    left: "+=100px"
                } : {
                    width: "+=100px",
                    left: "-=100px"
                }
                $("#toggle").stop().animate(
                    options, {
                        duration: 1200,
                        complete: function() {
                            this.style.left = direction ? "100%" : "";
                        }
                    });
            });
        });
    </script>
</head>
<body>
    <p>Click anywhere to toggle the box.</p>
    <div id="toggle">toggle slideRight</div>
</body>
</html>

jurvrn · #14 (**permalink**) 11.05.2021, 16:20

рони,
кончно понимаю

Сообщение от рони

без jquery-ui

вроде на чистый javascript не похоже...
Попытался заставить блок вылезать справа не получилось у меня.
Просьба убрать блок за границу экрана справа и чтобы он выплывал влево

рони · #15 (**permalink**) 11.05.2021, 17:20

Сообщение от jurvrn

Просьба убрать блок за границу экрана справа и чтобы он выплывал влево

а сейчас разве не так?

рони · #16 (**permalink**) 11.05.2021, 17:25

мысли вслух:
если можно использовать css, то лучше использовать css, чем js и тем более jquery.

jurvrn · #17 (**permalink**) 12.05.2021, 11:37

Сообщение от рони

а сейчас разве не так?
если можно использовать css, то лучше использовать css, чем js и тем более jquery.

в вашем коде блок изначально показан, а его надо изначально скрыть.
Вы видели искажения, может JS/JQuery отработается по другому
вот ещё вроде хороший код но не могу заставить его работать
https://codepen.io/intersk/pen/YzZwyYj
или
https://codepen.io/intersk/pen/KKWVzQb

рони · #18 (**permalink**) 12.05.2021, 13:13

Сообщение от jurvrn

а его надо изначально скрыть.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #toggle {
            position: absolute;
            width: 0px;
            height: 100px;
            background: #ccc;
            left: 100%;
            overflow: hidden;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let direction = 1;
            $(document).click(function() {
                direction ^= 1;
                let options = direction ? {
                    width: "-=100px",
                    left: "+=100px"
                } : {
                    width: "+=100px",
                    left: "-=100px"
                }
                $("#toggle").stop().animate(
                    options, {
                        duration: 1200,
                        complete: function() {
                            this.style.left = direction ? "" : "calc(100% - 100px)";
                        }
                    });
            });
        });
    </script>
</head>
<body>
    <p>Click anywhere to toggle the box.</p>
    <div id="toggle">toggle slideRight</div>
</body>
</html>

jurvrn · #19 (**permalink**) 12.05.2021, 15:32

рони, спасибо, это то что надо! а как-то упростить, ускорить этот скрипт можно? а то смотрю там вычисления... Или не так понял?

И где там настраивается ширина выезжающего блока? Тем более что планируется она по ширине текста, текст разный, а блоков этих будет несколько (типа меню).
Поэтому я не могу всем указать одинаковую ширину...

рони · #20 (**permalink**) 12.05.2021, 15:48

Сообщение от jurvrn

ускорить этот скрипт можно? а

строка 31

Форум

Справочник

Discord чат

Курсы javascript