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 () {
$('#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>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!
