Цитата:
https://api.jqueryui.com/slide-effect/ |
рони,
сделал как понял, так как мануал короткий, и работает не так как надо ( https://jsfiddle.net/jurvrn/oqpktewn/14/ ещё пример сделал https://jsfiddle.net/jurvrn/oqpktewn/23/ и нашел вот это, это уже анимация https://www.tutorialrepublic.com/cod...d-right-effect Но мне нужен такой эффект как уже у меня есть. То есть на hover закрепить слайд. Ну и чтобы срабатывал toggle когда hover пропадал |
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>
|
рони,
кончно понимаю Цитата:
Попытался заставить блок вылезать справа не получилось у меня. Просьба убрать блок за границу экрана справа и чтобы он выплывал влево |
Цитата:
|
мысли вслух:
если можно использовать css, то лучше использовать css, чем js и тем более jquery. |
Цитата:
Вы видели искажения, может JS/JQuery отработается по другому вот ещё вроде хороший код но не могу заставить его работать https://codepen.io/intersk/pen/YzZwyYj или https://codepen.io/intersk/pen/KKWVzQb |
Цитата:
<!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>
|
рони, спасибо, это то что надо! а как-то упростить, ускорить этот скрипт можно? а то смотрю там вычисления... Или не так понял?
И где там настраивается ширина выезжающего блока? Тем более что планируется она по ширине текста, текст разный, а блоков этих будет несколько (типа меню). Поэтому я не могу всем указать одинаковую ширину... |
Цитата:
|
| Часовой пояс GMT +3, время: 10:25. |