Jquery에서 토글과 슬라이드토글의 차이점에 대한 간략한 분석
- 巴扎黑원래의
- 2017-06-30 11:16:531466검색
toggle 및 SlideToggle 메소드는 요소를 표시하거나 숨길 수 있습니다. 너무 강력해요~
차이점:
토글: 동적 효과가 오른쪽에서 왼쪽으로 적용됩니다. 측면 움직임.
slideToggle: 아래에서 위로 역동적인 효과를 줍니다. 수직 행동.
예를 들어 나무가 아래에서 위로 줄어드는 역동적인 효과를 얻으려면 SlideToggle을 사용하면 됩니다.
또한 토글 및 슬라이드토글에 대한 몇 가지 매개변수를 설정할 수 있습니다. 자세한 내용은 jQuery API를 참조하세요~
토글 사용법:
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>
<SCRIPT LANGUAGE="
JavaScript
">
$(function(){
$("#z").toggle(
function(){
alert(1);
},
function(){
alert(2);
},
function(){
alert(3);
}
);
$("#x").click(function(){
$("#z").toggle(
function(){
alert(1);
},
function(){
alert(2);
},
function(){
alert(3);
}
);
});
})
</SCRIPT>
<p style="
width
:100px;
height
:100px;
background-color
:red;" id="z"></p>
<p style="width:100px; height:100px; background-color:blue;" id="x"></p>
slideToggle 사용법:
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.imgclass
{
width: 300px;
height: 300px;
border: solid 1px red;
}
</style>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
});
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
});
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
</script>
</head>
<body>
<p>
<p>
<input id="Button1" type="button" value="上拉" /><input id="Button2" type="button"
value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></p>
<p>
<img alt="" src="images/1.jpg" class="imgclass" /></p>
</p>
</body>위 내용은 Jquery에서 토글과 슬라이드토글의 차이점에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.