shahin53
پنج شنبه 14 تیر 1397, 19:29 عصر
سلام
ببخشید من یک سوال داشتم:
من امروز می خوام کار کردن با انیمیشن ها رو یاد بگیرم و البته نسبت به سنم کمی دیر شده اما خب چه میشه کرد به قول قدیمی ها گذر پوست به دباغ خونه میفته.
من یک div درست کردم و گفتم هروقت که عرض این div تغییر کرد تغییر عرض در زمان دو ثانیه انجام بشه. اما کد کار نمی کنه:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 0;
height: 0;
background: red;
transition: width 2s;
display: none;
}
/*div:hover {
width: 300px;
}
*/
.mystyle {
width: 100px;
height: auto;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
display: block;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div id="mor">
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
</div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script type="text/javascript">
let a = 1;
let element = document.getElementById("mor");
function myFunction() {
// document.getElementById("mor").innerHTML = "Hello World";
if (a ===1) {
element.classList.add("mystyle");
a=0;
}
else if (a===0) {
a = 1;
element.classList.remove("mystyle");
}
}
</script>
</script>
</body>
</html>
چیزی که بیشتر هم عچیبه اینه که اگر اون قسمت کد که کامنتش کردم رو از حالت کامنت خارج کنم کار مییکنه.
خیلی ممنون میشم اگه کسی بنده رو راهنمایی کنه
ببخشید من یک سوال داشتم:
من امروز می خوام کار کردن با انیمیشن ها رو یاد بگیرم و البته نسبت به سنم کمی دیر شده اما خب چه میشه کرد به قول قدیمی ها گذر پوست به دباغ خونه میفته.
من یک div درست کردم و گفتم هروقت که عرض این div تغییر کرد تغییر عرض در زمان دو ثانیه انجام بشه. اما کد کار نمی کنه:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 0;
height: 0;
background: red;
transition: width 2s;
display: none;
}
/*div:hover {
width: 300px;
}
*/
.mystyle {
width: 100px;
height: auto;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
display: block;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div id="mor">
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
<p>ali</p>
</div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script type="text/javascript">
let a = 1;
let element = document.getElementById("mor");
function myFunction() {
// document.getElementById("mor").innerHTML = "Hello World";
if (a ===1) {
element.classList.add("mystyle");
a=0;
}
else if (a===0) {
a = 1;
element.classList.remove("mystyle");
}
}
</script>
</script>
</body>
</html>
چیزی که بیشتر هم عچیبه اینه که اگر اون قسمت کد که کامنتش کردم رو از حالت کامنت خارج کنم کار مییکنه.
خیلی ممنون میشم اگه کسی بنده رو راهنمایی کنه