클릭 div를 왼쪽으로 슬라이드하고 jquery에서 숨기도록 설정하는 방법
- WBOY원래의
- 2022-04-24 18:30:291624검색
방법: 1. "$("div").click(function(){})"을 사용하여 div 요소에 클릭 이벤트를 추가하고 이벤트 처리 기능을 지정합니다. 2. "$(this).animate"를 사용합니다. 함수에서 ({오른쪽:"왼쪽 스트로크 거리",불투명도:'0'},시간);" 그냥 설정하세요.
이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.
jquery에서 클릭하면 div가 왼쪽으로 밀리고 숨겨지도록 설정하는 방법
animate() 메서드는 CSS 속성 집합의 사용자 정의 애니메이션을 실행합니다.
이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다.
숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색:빨간색").
팁: 상대 애니메이션을 만들려면 "+=" 또는 "-="를 사용하세요.
구문
(selector).animate({styles},speed,easing,callback)매개변수 설명
스타일 필수입니다. 애니메이션 효과를 생성하는 하나 이상의 CSS 속성/값을 지정합니다.
참고: animate() 메서드와 함께 사용하는 경우 속성 이름은 camelCase여야 합니다. padding-left 대신 paddingLeft를 사용해야 하고 margin-right 대신 marginRight를 사용해야 합니다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#panel").click(function () {
$(this).animate({ right: "100px",opacity:'0' }, 2000);
})
})
</script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
#panel {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<body>
<div id="panel"></div>
</body>
</html>출력 결과:
추천 관련 동영상 튜토리얼: jQuery 동영상 튜토리얼
위 내용은 클릭 div를 왼쪽으로 슬라이드하고 jquery에서 숨기도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!