집 >웹 프론트엔드 >JS 튜토리얼 >jquery 숨기기, 이벤트 표시 및 콜백 프롬프트, 페이드 인 및 아웃 fadeToggle, 슬라이드 인 및 슬라이드 아웃 SlideToggle, 애니메이션 애니메이션 중지 애니메이션 중지

jquery 숨기기, 이벤트 표시 및 콜백 프롬프트, 페이드 인 및 아웃 fadeToggle, 슬라이드 인 및 슬라이드 아웃 SlideToggle, 애니메이션 애니메이션 중지 애니메이션 중지

巴扎黑원래의: 2017-06-30 11:15:341703검색

1.jquery 숨기기 및 표시 이벤트

$("p").hide();      //隐藏事件
$("p").hide(1000);  //1秒内缓慢隐藏
$("p").show();      //显示事件
$("p").toggle();    //在隐藏和显示中切换

숨긴 후 프롬프트 콜백 표시

$("p").hide(function(){    alert("提示消息已经隐藏");    });
$("p").hide(1000,function(){    alert("1s内缓慢隐藏并提示消失已经隐藏");    });

2. 페이드 인 및 아웃

$("#p1").fadeIn();             //淡入$("#p2").fadeIn("slow");   //缓慢淡入$("#p3").fadeIn(3000);    //延迟3秒淡入
$("#p").fadeOut()            //淡出
$("#p").fadeToggle()        //淡入淡出
$("#p3").fadeTo("slow",0.7);     //设置淡化程度  0完全消失，1不淡化

3. 슬라이드 인 및 슬라이드 아웃

$(".panel").slideDown();         //向下滑动显示class=panel的p
$(".panel").slideUp("slow");    //向上收起class=panel的p
$(".panel").slideToggle("slow");    //点击显示，再点击收起

예제는 다음과 같습니다.

<head>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");    //点击向下滑动显示p，再次点击收起
  });
});
</script>
<style type="text/css"> 
p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
display:none;   /*设置隐藏的p*/
}
</style>
</head>
<body>
<p class="panel">
<p>显示隐藏的p</p>
<p>请大家关注我的博客</p>
</p>
<p class="flip">点击显示，再次点击隐藏</p>
</body>

4. animate

먼저 설명 CSS 속성을 직접 수정하는 대신 animate를 호출해야 하는 이유에 대해 이야기해 보겠습니다. animate를 사용하면 p의 스타일을 천천히 수정할 수 있고 애니메이션 효과가 더 아름답지만 CSS를 직접 수정하면 바로 완료됩니다. 로딩 및 깜박임으로 인해 효과가 좋지 않습니다.

기본적으로 모든 HTML 요소의 위치는 고정되어 이동할 수 없습니다. 위치를 조작하려면 먼저 요소의 CSS position 속성을 상대, 고정 또는 절대로 설정해야 합니다.

예:

<head>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left:&#39;250px&#39;,
      opacity:&#39;0.5&#39;,        //淡化
      height:&#39;150px&#39;,
      width:&#39;150px&#39;
      //height:&#39;+=150px&#39;,       //可使用相对值
      //width:&#39;+=150px&#39;
      //height:&#39;toggle&#39;,           //使用预定值，从消失到显示
      //width:&#39;toggle&#39;
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
</body>

단계별 애니메이션

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var p=$("p");           //
定义变量
p到指定位置
    p.animate({height:&#39;300px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;300px&#39;,opacity:&#39;0.8&#39;},"slow");
    p.animate({height:&#39;100px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
  });
});
</script>

5. 애니메이션 중지

$("p").stop();   //按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$("p").stop(true);  //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
$("p").stop(true,true);  //会立即完成当前活动的动画，然后停下来。

위 내용은 jquery 숨기기, 이벤트 표시 및 콜백 프롬프트, 페이드 인 및 아웃 fadeToggle, 슬라이드 인 및 슬라이드 아웃 SlideToggle, 애니메이션 애니메이션 중지 애니메이션 중지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jquery가 알아야 할 몇 가지 일반적인 특수 효과 방법 및 사용 예(정리)다음 기사：jquery가 알아야 할 몇 가지 일반적인 특수 효과 방법 및 사용 예(정리)