jquery 학습노트2-jq효과

1. 숨기기 표시:
show()와hide() 방법으로 숨김을 표시할 수 있습니다.

$("#hide").click(function(){
    $("p").hide();
})
$("#show").click(function(){
    $("p").show();
});

toggle () 방법을 사용하여 show () 방법과hide () 방법 사이를 전환할 수 있습니다.

$("#tog").click(function(){
   $("p").toggle();
});

구문:

$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
// speed  callback ，speed （ 1000,2000 ）；callback ；

　　
2. 페이드인 페이드아웃:
메서드:fadeIn();　　　　 fadeOut();　　　　fadeToggle();　　　　fadeTo()

$("#btn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut(2000);
    $("#div3").fadeIn("slow")  ;
})

구문:
　　　　$(selector).fadeIn(speed,callback);
　　　　$(selector).fadeOut(speed,callback);
　　　　$(selector).fadetoggle(speed,callback);

#("#btn").click(function(){
   $("#div4").fadeTo(slow,0.12);
});

fadeTo는 대상을 주어진 투명도 값으로 점차적으로 변화시킬 수 있다(나머지 0에서 1 사이).
문법:fadeTo(speed,opacity,callback);
 
3. 미끄럼:
메서드: slideDown () slideUp () slideToggle ()

$("button").click(function(){
    $("#p1").slideUP("slow");      // 
    $("#p2").slideDown("slow");      // 
    $("#p3").toggle("slow");      //    
});

구문:
　　$(selector).slideUp(speed,callback);
　　$(selector).slideDown(speed,callback);
　　$(selector).slideToggle(speed,callback);
 
넷째, 애니메이션:
구문:

$(selector).animate({params},speed,callback);

필수:params 매개 변수는 애니메이션을 형성한 css 속성을 정의합니다.
선택사항:speed 매개 변수는 효과가 길어집니다.
선택 사항:callback은 리셋 함수입니다.
1. 다중 매개변수 설정

$("#dtn").click(function(){
    $("div").animate({
　　left:‘20px’，
　　opcity:'0.2',
　　height:'150px',
　　width:'150px'
　　})；
});

2. animate에서도 상대 값을 사용할 수 있습니다.

$("button").click(function(){
    $("#div5").animate({
    left:'150px',
    height:'+=20px',
    width:'+=30px',
    });
});

3. animate를 "show", "hide", "toggle"로 설정할 수 있습니다.

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

효과: 설정값과 기본값 사이를 전환합니다.
4. 대기열 기능 사용:

$("button").click(function(){
      var div=$("div");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow");
      div.animate({width:'100px',opacity:'0.8'},"slow");   
});

여러 개의 내부'대열'을 설정할 수 있으며, 실행할 때 순서대로 애니메이션 호출을 진행합니다
5. 애니메이션 예:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

효과:div를 오른쪽으로 이동하여 텍스트 번호를 추가합니다.
 
5. stop() 방법;
stop () 방법은 jQuery 효과를 정지하고 중단하는 데 사용됩니다.
구문:

$(selector).stop(stopAll,goToEnd);

선택 사항: stopAll, 애니메이션 대기열을 지울지 여부.기본false는 현재 애니메이션만 멈추고 후속 애니메이션은 순서대로 실행됩니다.
선택 사항: goToEnd, 현재 애니메이션을 즉시 완성할지 여부, 기본false.
따라서 기본stop () 은 요소에서 실행 중인 애니메이션을 지웁니다.
6. callback 리셋 함수
callback: 현재 동작이 끝난 후에 실행합니다.선택 가능한 매개 변수로 사용하기;
애니메이션과 관련된 함수 다음에 문장을 실행하려면callback을 사용하십시오.

$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});

7. 체인 동작 체인
한 문장에 여러 개의 jQuery 방법을 사용하고 한 대상에 여러 가지 방법을 연속적으로 사용하며 순서대로 실행할 수 있습니다.

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

　　
 
다음으로 전송:https://www.cnblogs.com/zhuyucun/p/6276684.html