어떻게 하면 접힌 것에서 확장된 것으로(그 반대) 이동할 수 있지만 오른쪽에서 왼쪽으로 이동할 수 있습니까?
내가 보는 대부분의 것들은 항상 왼쪽에서 오른쪽으로 치우쳐 있다.
이 작업은 jQueryUI 숨기기/표시 방법을 사용하여 기본적으로 수행할 수 있습니다. 예.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
이:
$('#pollSlider-button').animate({"margin-right": '+=200'});
[라이브 데모를] [1]
데모에 대한 것을 막기 위해 일부 코드를 추가되었음 연산뿐 여백 켜짐이 더블 클릭:
이 기능을 사용하여 부드럽게를;)
http://jsfiddle.net/XNnHC/1591/
추가 자바스크립트 코드를 재거됨.
클래스 이름을 &. css 는 코드 변경일 일부
추가 기능을 확장하거나 축소할 경우 찾을 수 있다.
변경일 표시할지를 부드럽게를 사용하여 방관하겠나 효과
변경일 애니메이션 속도
http://jsfiddle.net/XNnHC/1808/
Take a look at [이 apc® 예] (
) 를 사용하는 jQuery UI 해야했다.이 링크를 클릭하면 사용자가 빠르게 끊지 않고 사용할 수 있는 애니메이션 중 패널.
Javascript 코드를 간단합니다.
$(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;
});
});
이 링크를 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>
[그린속 애니메이션 플랫폼 (가스파)] (http://greensock.com/gsap) * 과 (와) '는' / '와' 보다 훨씬 더 매끄러워집니다 트웨인라이트 트와인마스 전환 또는 CSS3 jQuery 사용자정의를 훨씬 쉽습니다. # 39, ll, you& 위해 CSS 속성을 애니메이션할 트웨인라이트 / 트와인마스 어른들도 함께 그들의 플러그인에는 CSSPlugin" 불렀으매 ";). 이렇게 하면 자동으로 트와인마스 포함되어 있습니다.
먼저 트와인마스 읽어들입니다 library:*
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<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});
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
자신의 웹사이트에 따르면: 가볍고 유연한 트웨인라이트 ", 극히 빠른 위한 애니메이션 애니메이션 도구 역할을 하는 그린속 ." 플랫폼 (가스파),
예를 들어, 오른쪽에서 왼쪽으로 jQuery UI , 와 애니메이션 없이 그냥 jQuery (모든 버전 http://schmidt. devlib. https://api.jquery.com/animate/).
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 참 - >.
$(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>
끝 - < 스니핏 >;!
예를 들어 나를 통해 수행됨 사용하여 스크롤 (HTML, CSS, JS, 그냥 그냥 함께 jquery library). Left. 슬라이드에서는 때 버튼을 누르면 아래로 스크롤하면
역시 내가 유일하게 경우 제안하세요 운영까지도 로만스였나 효과를 사용하여 # 39, s, t # 39 don& jQuery UI 너무 무겁게 it& 때문에 (이를 사용하고 싶은 경우 해당).
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
확인란 이 예
Div) '가' 너비입니다 nnt 포지셔닝됩니까 알고 있다면, 바로 사용할 수 있습니다.
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
화면 밖에서 밉니다 있는 것으로 알려졌다.
Div '' 랩 (wrap it 컨테이너입니다 수도 있습니다
#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);