Jquery에서 토글과 슬라이드토글의 차이점에 대한 간략한 분석-JS 튜토리얼-php.cn

Jquery에서 토글과 슬라이드토글의 차이점에 대한 간략한 분석

巴扎黑

풀어 주다： 2017-06-30 11:16:53

원래의

1501명이 탐색했습니다.

jQuery의

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 () {
            $(&#39;#Button1&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideUp(2000);
            });
            $(&#39;#Button2&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideDown(2000);
            });
            $(&#39;#Button3&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).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 중국어 웹사이트의 기타 관련 기사를 참조하세요!