Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 10.05.2021, 22:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от jurvrn
slideLeft/slideRight
хоть во все стороны сразу есть
https://api.jqueryui.com/slide-effect/
Ответить с цитированием
  #12 (permalink)  
Старый 11.05.2021, 10:50
Аспирант
Отправить личное сообщение для jurvrn Посмотреть профиль Найти все сообщения от jurvrn
 
Регистрация: 04.04.2021
Сообщений: 52

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

Последний раз редактировалось jurvrn, 11.05.2021 в 11:08.
Ответить с цитированием
  #13 (permalink)  
Старый 11.05.2021, 11:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

slideRight jquery
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>
Ответить с цитированием
  #14 (permalink)  
Старый 11.05.2021, 16:20
Аспирант
Отправить личное сообщение для jurvrn Посмотреть профиль Найти все сообщения от jurvrn
 
Регистрация: 04.04.2021
Сообщений: 52

рони,
кончно понимаю
Сообщение от рони
без jquery-ui
вроде на чистый javascript не похоже...
Попытался заставить блок вылезать справа не получилось у меня.
Просьба убрать блок за границу экрана справа и чтобы он выплывал влево
Ответить с цитированием
  #15 (permalink)  
Старый 11.05.2021, 17:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от jurvrn
Просьба убрать блок за границу экрана справа и чтобы он выплывал влево
а сейчас разве не так?
Ответить с цитированием
  #16 (permalink)  
Старый 11.05.2021, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

мысли вслух:
если можно использовать css, то лучше использовать css, чем js и тем более jquery.
Ответить с цитированием
  #17 (permalink)  
Старый 12.05.2021, 11:37
Аспирант
Отправить личное сообщение для jurvrn Посмотреть профиль Найти все сообщения от jurvrn
 
Регистрация: 04.04.2021
Сообщений: 52

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

Последний раз редактировалось jurvrn, 12.05.2021 в 12:30.
Ответить с цитированием
  #18 (permalink)  
Старый 12.05.2021, 13:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от 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>
Ответить с цитированием
  #19 (permalink)  
Старый 12.05.2021, 15:32
Аспирант
Отправить личное сообщение для jurvrn Посмотреть профиль Найти все сообщения от jurvrn
 
Регистрация: 04.04.2021
Сообщений: 52

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

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

Последний раз редактировалось jurvrn, 12.05.2021 в 15:38.
Ответить с цитированием
  #20 (permalink)  
Старый 12.05.2021, 15:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от jurvrn
ускорить этот скрипт можно? а
строка 31
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Обновление отдельного блока без перезагрузки страницы BellaChao Общие вопросы Javascript 4 29.01.2018 14:40
Движение по элементам блока без перезапуска функции выпадающеего меню. tutelaris Элементы интерфейса 4 26.04.2013 09:15
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21