Heim > Artikel > Web-Frontend > Eine kurze Analyse des Unterschieds zwischen Toggle und SlideToggle in JQuery

Eine kurze Analyse des Unterschieds zwischen Toggle und SlideToggle in JQuery

巴扎黑Original: 2017-06-30 11:16:531473Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppenNächster Artikel：jquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppen

In Verbindung stehende Artikel

Mehr sehen