Hogy lehetne megoldani ezt JavaScript-ben?
Tegyük fel, hogy van egy négyzetem, aminek a szélességét egy bizonyos elemre kattintva megnövelem, majd egy másik elemre kattintva visszaáll íz eredeti méretére.
Ez rendben is van, viszont szeretnék játszani picit a transationDuration-nal.
Azt szeretném megoldani, hogy amikor megnő, azt 2 másodperc alatt tegye meg, viszont a visszazsugorodás már csak 1 másodperc legyen.
Köszi szépen a válaszokat!
válasza:Amikor az elsőre kattintasz, akkor a transitiondurationt átállítod 1 másodpercre:
document.getElementById("mydiv").style.transitionDuration = "1s";
Ezután meg természetesen vissza.
Igen, eddig én is eljutottam, ez a sor nekem is megvan, viszont így mindkét funkciónak 1s lesz a transzformációs ideje.
Nem igazán értem a "természetesen vissza" mondatot. Ami neked természetes, az sajnos nekem még nem. :D Elég gyerekcipőben járok JavaScript terén. :(
Kifejtenéd nekem?
válasza:<!DOCTYPE html>
<html>
<head>
<style>
#square {
background-color: #98bf21;
height: 100px;
width: 100px;
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#square").animate({
height: '250px',
width: '250px'
}, 2000);
});
$("#button2").click(function(){
$("#square").animate({
height: '100px',
width: '100px'
}, 1000);
});
});
</script>
</head>
<body>
<p>
<button id="button1">Nagyítás (2s)</button>
<button id="button2">Kicsinyítés (1s)</button>
</p>
<div id="square"></div>
</body>
</html>
válasza:Köszi szépen, de ez jQuery (ami tudom, hogy egy JavaScript könyvtár), viszont én JavaScript-el szeretném megoldani.
Köszi előre is a válaszokat!
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!