Eine kurze Analyse des Unterschieds zwischen Toggle und SlideToggle in JQuery-js-Tutorial-php.cn

Eine kurze Analyse des Unterschieds zwischen Toggle und SlideToggle in JQuery

巴扎黑

Freigeben： 2017-06-30 11:16:53

Original

1514 Leute haben es durchsucht

Die

toggle- und slideToggle-Methoden in jQuery

können ein Element sowohl anzeigen als auch ausblenden. So kraftvoll~

Der Unterschied ist:

Umschalten: Der dynamische Effekt erfolgt von rechts nach links. Seitliche Bewegungen.

slideToggle: dynamischer Effekt von unten nach oben. Vertikale Aktion.

Wenn Sie also beispielsweise einen dynamischen Effekt erzielen möchten, bei dem ein Baum von unten nach oben schrumpft, verwenden Sie einfach slideToggle.

Darüber hinaus gibt es einige Parameter für toggle und slideToggle, die eingestellt werden können. Weitere Informationen finden Sie in der jQuery-API~

Verwendung von toggle:

<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>

Nach dem Login kopieren

Verwendung von 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Unterschieds zwischen Toggle und SlideToggle in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!