오른쪽에서 왼쪽으로?
접힌 것에서 확장된 것(및 그 반대)으로 디바고를 가지면서 오른쪽에서 왼쪽으로 디바고를 수행하려면 어떻게 해야 합니까?
제가 밖에서 보는 대부분의 것들은 항상 왼쪽에서 오른쪽입니다.
$("#slide").animate({width:'toggle'},350);
참조: https://api.jquery.com/animate/
이는 jQuery UI 숨기기/표시 방법을 사용하여 기본적으로 수행할 수 있습니다.예.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
참조: http://docs.jquery.com/UI/Effects/Slide
사용:
$('#pollSlider-button').animate({"margin-right": '+=200'});
개선된 버전
더블 클릭 시 이중 마진을 방지하기 위해 데모에 일부 코드가 추가되었습니다. http://jsfiddle.net/XNnHC/942/
완화와 함께 사용합니다 ;)
http://jsfiddle.net/XNnHC/1591/
추가 JavaScript 코드가 제거되었습니다.
클래스 이름 및 일부 CSS 코드가 변경됨
확장 또는 축소 여부를 확인하는 기능이 추가되었습니다.
완화 효과 사용 여부가 변경됨
애니메이션 속도 변경
http://jsfiddle.net/XNnHC/1808/
jQuery UI를 사용하는 Fiddle에서 이 작업 예제를 살펴 보십시오.원래 왼쪽에서 오른쪽으로 사용하던 솔루션인데 오른쪽에서 왼쪽으로 작업하도록 변경했습니다.
사용자는 사용 가능한 패널 사이에서 애니메이션을 중단하지 않고 빠르게 링크를 클릭할 수 있습니다.
자바스크립트 코드는 간단합니다.
$(document).ready(function(){
// Mostra e nascondi view-news
var active = "europa-view";
$('a.view-list-item').click(function () {
var divname= this.name;
$("#"+active ).hide("slide", { direction: "right" }, 1200);
$("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
active = divname;
});
});
Fiddle 링크에서 HTML과 CSS를 가져옵니다.
효과적인 프레젠테이션을 위해 흰색 배경과 왼쪽 패딩을 추가했습니다.
사용 방법
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
또는 사용할 수 있습니다.
$('#myDiv').toggle("slide:right");
저는 이런 식으로 해왔습니다.
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
해당 노드 "btn"은 애니메이션 전에 숨겨야 하며, "position: absolute"를 설정해야 할 수도 있습니다.
또 다른 언급할 가치가 있는 라이브러리는 animate.css입니다.이것은 jQuery와 잘 작동하며 CSS 클래스를 전환하는 것만으로도 많은 재미있는 애니메이션을 할 수 있습니다.
마치..
$("#slide").togle().togleClass('애니메이션 바운스 인 레프트');
GreenSock Animation Platform(GSAP) 및TweenLite/TweenMaxjQuery 또는 CSS3 전환보다 훨씬 큰 사용자 지정을 통해 훨씬 원활한 전환을 제공합니다.트윈라이트/트윈맥스로 CSS 속성을 애니메이션화하려면 "CSS 플러그인"이라는 플러그인도 필요합니다.TweekenMax는 이 기능을 자동으로 포함합니다.
먼저 TweenMax 라이브러리를 로드합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
또는 가벼운 버전인 TweenLite:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
그런 다음 애니메이션을 호출합니다.
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
ID 선택기를 사용하여 호출할 수도 있습니다.
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
jQuery를 로드한 경우 특정 클래스를 포함하는 모든 요소와 같이 고급 브로드 셀렉터를 사용할 수 있습니다.
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
자세한 내용은 TwinLite 설명서를 참조하십시오.
그들의 웹사이트에 따르면: "트윈라이트는 그린삭스 애니메이션 플랫폼(GSAP)의 기초 역할을 하는 매우 빠르고, 가볍고, 유연한 애니메이션 도구입니다."
jQuery UI를 사용하지 않고 jQuery(모든 버전, https://api.jquery.com/animate/) 참조)를 사용하지 않은 오른쪽에서 왼쪽으로 애니메이션의 예입니다.
$(document).ready(function() {
var contentLastMarginLeft = 0;
$(".wrap").click(function() {
var box = $(".content");
var newValue = contentLastMarginLeft;
contentLastMarginLeft = box.css("margin-left");
box.animate({
"margin-left": newValue
}, 500);
});
});.wrap {
background-color: #999;
width: 200px;
overflow: hidden;
}
.content {
width: 100%;
margin-left: 100%;
background-color: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
click here
<div class="content">
I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
</div>
</div>요소의 너비를 0으로 정의하고 오른쪽으로 이동한 다음 표시하려는 이벤트에 대해 정의할 수 있습니다.그것은
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
그렇게 간단합니다.
여기에 있는 예제를 확인하십시오.
$("#slider").animate({width:'toggle'});
https://jsfiddle.net/q1pdgn96/2/
스크롤(HTML, CSS 및 JS만, jquery 라이브러리만)을 사용하여 수행한 예입니다.아래로 스크롤하면 버튼이 왼쪽으로 움직입니다.
또한, 당신이 원하는 것이 이 효과뿐이라면, jQuery UI는 너무 무겁기 때문에 사용하지 않는 것이 좋습니다(그냥 사용하고 싶다면).
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
만약 당신이div 있기 과 같이 하면 됩니다.
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
그러면 화면에서 미끄러집니다.
도 있습니다.div
#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}
#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}
<div id="myContainer">
<div id="myDiv">Wheee!</div>
</div>
$('#myDiv').animate({left:'-200'},1000);
작은 화면 크기의 메뉴를 코딩하는 동안 비슷한 문제가 발생했습니다.제가 생각한 해결책은 뷰포트 밖으로 밀어내는 것이었습니다.
저는 이것을 SAS와 JQuery(JQuery UI 없음)를 사용하여 만들었지만, 이것은 모두 네이티브 JS와 CSS에서 달성할 수 있었습니다.
https://codepen.io/maxbethke/pen/oNzMLRa
var menuOpen = false
var init = () => {
$(".menu__toggle, .menu__blackout").on("click", menuToggle)
}
var menuToggle = () => {
console.log("Menu:Toggle");
$(".menu__blackout").fadeToggle();
if(menuOpen) { // close menu
$(".menu__collapse").css({
left: "-80vw",
right: "100vw"
});
} else { // open menu
$(".menu__collapse").css({
left: "0",
right: "20vw"
});
}
menuOpen = !menuOpen;
}
$(document).ready(init);.menu__toggle {
position: absolute;
right: 0;
z-index: 1;
}
.menu__blackout {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.menu__collapse {
position: absolute;
top: 0;
right: 100vw;
bottom: 0;
left: -80vw;
background: white;
-webkit-transition: ease-in-out all 1s;
transition: ease-in-out all 1s;
z-index: 11;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu__toggle">Toggle menu</button>
<menu class="menu">
<div class="menu__blackout"></div>
<div class="menu__collapse">
<ul class="list">
<li class="list__item">
<a class="list__item__link" href="#section1">Menu Item 1</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section2">Menu Item 2</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section3">Menu Item 3</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section4">Menu Item 4</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section5">Menu Item 5</a>
</li>
</ul>
</div>
</menu>js:
$(document).on('click','a.slideleft', function(){
$('div.slidingdiv').addClass("ml-1000");
});
$(document).on('click','.back', function(){
$('div.slidingdiv').removeClass("ml-1000");
});
html:
<a class="open">slideleft</a>
<a class="back">back</a>
<div>Here on
<div class="slidingdiv">
Here off
</div>
</div>
스타일:
div.slidingdiv{
position:absolute;
transition: all 0.2s linear;
top:0;
left:0;
display:inline-block;
width:100%;
height:100%;
}
.ml-1000{
margin-left:1000px;
}
언급URL : https://stackoverflow.com/questions/596608/slide-right-to-left
'sourcetip' 카테고리의 다른 글
| 가져오기 오류: 'sklearn.externals'에서 'joblib' 이름을 가져올 수 없습니다. (0) | 2023.05.18 |
|---|---|
| Xcode로 코드를 포맷하는 방법은? (0) | 2023.05.18 |
| Node.js 모범 사례 예외 처리 (0) | 2023.05.18 |
| git pull과 git pull의 차이 -- 기본값 (0) | 2023.05.13 |
| API 컨트롤러로 원시 문자열을 반환하는 방법은 무엇입니까? (0) | 2023.05.13 |