11.05.2021, 11:59
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
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>
|
|
11.05.2021, 16:20
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
рони,
кончно понимаю
|
Сообщение от рони
|
|
без jquery-ui
|
вроде на чистый javascript не похоже...
Попытался заставить блок вылезать справа не получилось у меня.
Просьба убрать блок за границу экрана справа и чтобы он выплывал влево
|
|
11.05.2021, 17:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от jurvrn
|
|
Просьба убрать блок за границу экрана справа и чтобы он выплывал влево
|
а сейчас разве не так? |
|
11.05.2021, 17:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
мысли вслух:
если можно использовать css, то лучше использовать css, чем js и тем более jquery.
|
|
12.05.2021, 11:37
|
|
Аспирант
|
|
Регистрация: 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.
|
|
12.05.2021, 13:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от 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>
|
|
12.05.2021, 15:32
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
рони, спасибо, это то что надо! а как-то упростить, ускорить этот скрипт можно? а то смотрю там вычисления... Или не так понял?
И где там настраивается ширина выезжающего блока? Тем более что планируется она по ширине текста, текст разный, а блоков этих будет несколько (типа меню).
Поэтому я не могу всем указать одинаковую ширину...
Последний раз редактировалось jurvrn, 12.05.2021 в 15:38.
|
|
12.05.2021, 15:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от jurvrn
|
|
ускорить этот скрипт можно? а
|
строка 31 |
|
|
|
