JQuery 기초 애니메이션 작업 에 대한 자세 한 설명

1.jQuery 애니메이션 효과,숨 기기 및 표시.
두 가지 방법:hide()"숨 기기" show()"표시"


<p>JQuery    ，     </p>
<input type="button" value="  " id="button1">
<input type="button" value="  " id="button2">
 
 <script>
  $(document).ready(function(){
   $("#button1").click(function(){
    $("p").hide();
   })
   $("#button2").click(function() {
    $("p").hide();
   })
  })
 </script>

문법:$(selector).hide(speed.callback)
문법:$(selector).show(speed.callback)
callback 인자:완 료 된 함수 이름 을 숨 기거 나 표시 합 니 다.


$(document).ready(function(){
   $("#button1").click(function(){
    $("p").hide(500);
    alert("   ，    ")
   })
   $("#button2").click(function() {
    $("p").show(200,function(){
     alert("   ，    ")
    })
   }

문법:$(selector).toggle(speed.callback)
speed 매개 변 수 는 매개 변 수 를 숨 기 고 표시 하 는 속 도 를 규정 합 니 다.값 은"show","fast"입 니 다.밀리초(1 초 는 1000 밀리초)입 니 다.
callback 인자:완 료 된 함수 이름 을 숨 기거 나 표시 합 니 다.


$("#button3").click(function() {
     $("p").toggle(1000,function(){
     $("p").css({color:"yellow"})
     })

2.Jquery 슬라이딩 과 애니메이션
두 가지 방법:slideDow() toggleDoe()


<body>
<div id="slide">   ，          </div>
<div id="panel">Hello JQuery</div>
</body>
 
 
 
 <style>
  #slide,#slide{
   padding:5px;
   text-align:center ;
   background-color: #4bffe8;
   border:solid 1px #181caa;
  }
  #panel{
   display: none;
   padding:40px;
  }
 </style>
 <script>
  $(document).ready(function(){
   $("#slide").click(function(){
    $("#panel").slideToggle()
   })
  })
  </script>

3.JQuery 애니메이션 효과,애니메이션
animate()방법 은 사용자 정의 애니메이션 을 만 드 는 데 사 용 됩 니 다.
문법:
$(selector),animate({params},speed,callback)
필요 한 params 매개 변수 정의 애니메이션 css 속성 형성


<body>
<button>    </button>
<p>        HTML          ，        ，      ，       position     absolute，relative,fixed</p>
<div style="background-color: red;height:100px;width:100px;position:absolute"></div>
</body>
 
 
 
<script>
  $(document).ready(function() {
   $("button").click(function () {
    $("div").animate({left:"200px"},1000,function(){
    $("div").css({background:"yellow"})
   })
   })
  })
 </script>

4.여러 속성 조작:
animate();상대 값 사용


<body>
<input type="button" value="    " id="button">
<div style="background-color: red;height:100px;width:100px;position:absolute"></div>
</body>
 
 
 <script>
  $(document).ready(function(){
   $("#slide").click(function() {
    $("div").animate({
     left:"200px",opacity:"0.5",height:"160px",width:"160px"
    })
   })
   })
 </script>

위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JQuery 기초 애니메이션 작업 의 상세 한 해석 과 통합 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JQuery 기초 애니메이션 작업 에 대한 자세 한 설명

1.jQuery 애니메이션 효과,숨 기기 및 표시. 두 가지 방법:hide()"숨 기기" show()"표시" 문법:$(selector).hide(speed.callback) 문법:$(selector).sho...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JQuery 기초 애니메이션 작업 에 대한 자세 한 설명

좋은 웹페이지 즐겨찾기