Ik ben nieuw in JQ
Ik heb dit script dat ik op het internet heb gevonden en het doet precies wat ik nodig heb
Maar ik wil dat het glijden van rechts naar links is
Hoe kan ik het doen? help alstublieft
Dit is de code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>
Antwoord 1, Autoriteit 100%
U kunt dit doen met Aanvullende effecten als onderdeel van jQuery-ui
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
Antwoord 2, Autoriteit 54%
Probeer dit:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
Antwoord 3, autoriteit 23%
Probeer deze code aub
$(this).animate({'width': 'toggle'});
Antwoord 4, autoriteit 19%
Ik weet dat het een jaar geleden is dat dit werd gevraagd, maar alleen voor mensen die deze pagina gaan bezoeken, plaats ik mijn oplossing.
Door te gebruiken wat @Aldi Unanto hier suggereerde, is een vollediger antwoord:
jQuery('.show_hide').click(function(e) {
e.preventDefault();
if (jQuery('.slidingDiv').is(":visible") ) {
jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
} else {
jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
}
});
Eerst voorkom ik dat de link iets doet op klik.
Dan voeg ik een controle toe of het element zichtbaar is of niet.
Als het zichtbaar is, verberg ik het. Als het verborgen is, laat ik het zien.
U kunt de richting naar links of rechts wijzigen en de duur van 200 ms tot alles wat u maar wilt.
Bewerken:
Ik heb ook toegevoegd
.stop(true,true)
om Queue en jumpToEnd te wissen. Lees hier over de jQuery-stop
Antwoord 5, autoriteit 15%
Probeer dit
$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
Antwoord 6, autoriteit 15%
$("#mydiv").toggle(500,"swing");
more https://api.jquery.com/toggle/
Antwoord 7, autoriteit 8%
Ik zou u aanraden u de onderstaande CSS
te gebruiken
.showhideoverlay {
width: 100%;
height: 100%;
right: 0px;
top: 0px;
position: fixed;
background: #000;
opacity: 0.75;
}
U kunt dan een eenvoudige toggle-functie gebruiken:
$('a.open').click(function() {
$('div.showhideoverlay').toggle("slow");
});
Hiermee wordt het overlay-menu van rechts naar links weergegeven. U kunt ook de positionering gebruiken voor het wijzigen van het effect van boven of onderkant, dwz gebruik bottom: 0;in plaats van top: 0;– U ziet menu glijdend van rechts -bottom hoek.
Antwoord 8, Autoriteit 4%
Neem jQuery en jQuery UI-plug-ins toe en probeer dit
$("#LeftSidePane").toggle('slide','left',400);
Antwoord 9, Autoriteit 4%
U kunt dit proberen:
$('.show_hide').click(function () {
$(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});
Antwoord 10
Ik worstelde met toggle('slide')en slideToggleUREN.
Conclusies Ik krijg:
toggle('slide')kan alleen het elementfrom right to leftverbergen, wat betekent het laten zienfrom left to rightslideTogglekan alleen het elementfrom bottom to topverbergen, wat betekent het tonen van hetfrom top to bottom
Als u de richting van de samentrekking vrijelijk wilt definiëren, moet u de slide effectafkomstig van jQuery UIHTTPS: // api.jqueryui.com/slide-effect/?rdfrom=http://docs.jQuery.com/mw/index.php?title=ui/effects/slide&ionredirect=no
Bijvoorbeeld:
$element.toggle('slide', { direction: 'left/right/up/down' }, 1000)