woeful
شنبه 18 شهریور 1391, 16:29 عصر
سلام دوستان
کد زیر رو ببینین :
<html>
<head>
<style>
.sideelement{
position:fixed;
width:260px;
height:80px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
vertical-align: middle;
line-height: 20px;
vertical-align:text-bottom;
text-decoration: none;
font-family: Tahoma, Arial, sans-serif;
font-weight: normal;
color: #f3f3f3;
text-shadow: 4px 4px 4px rgba(0,0,0,.6);
transition: width .5s, opacity .5s , background-color .5s;
-moz-transition: width .5s, opacity .5s , background-color .5s;
-webkit-transition: width .5s, opacity .5s , background-color .5s;
-o-transition: width .5s, opacity .5s , background-color .5s;
}
.sideelement:hover
{
width:280px;
cursor:pointer;
background: rgba(240, 50, 80, 0.6);
}
</style>
<script language="javascript">
function dothat()
{
var div = document.getElementById('me');
if(div.style.width == '400px')
{
div.style.width = '260px';
}
else
{
div.style.width = '400px';
}
}
</script>
</head>
<body>
<div class="sideelement" id="me">
</div>
<br><br><br><br><br>
<div onclick="dothat();">
click me
</div>
</body>
</html>
اگه این کدو اجرا کنید یه box میبینید که وقی موسو روش میبریم خاصیت width رنگی زمینه و opacity اون زیاد میشه (برای بار اول ) اما وقتی روی click me دوبار کلیک میکنیم تا box به حالت اول برگرده وقتی موسو روی box میبریم خاصیت width اون تغییر نمیکنه در صورتی که رنگ زمینه و opacity اون تغییر میکنه مشکل کار کجاست ؟
ممنون
کد زیر رو ببینین :
<html>
<head>
<style>
.sideelement{
position:fixed;
width:260px;
height:80px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
vertical-align: middle;
line-height: 20px;
vertical-align:text-bottom;
text-decoration: none;
font-family: Tahoma, Arial, sans-serif;
font-weight: normal;
color: #f3f3f3;
text-shadow: 4px 4px 4px rgba(0,0,0,.6);
transition: width .5s, opacity .5s , background-color .5s;
-moz-transition: width .5s, opacity .5s , background-color .5s;
-webkit-transition: width .5s, opacity .5s , background-color .5s;
-o-transition: width .5s, opacity .5s , background-color .5s;
}
.sideelement:hover
{
width:280px;
cursor:pointer;
background: rgba(240, 50, 80, 0.6);
}
</style>
<script language="javascript">
function dothat()
{
var div = document.getElementById('me');
if(div.style.width == '400px')
{
div.style.width = '260px';
}
else
{
div.style.width = '400px';
}
}
</script>
</head>
<body>
<div class="sideelement" id="me">
</div>
<br><br><br><br><br>
<div onclick="dothat();">
click me
</div>
</body>
</html>
اگه این کدو اجرا کنید یه box میبینید که وقی موسو روش میبریم خاصیت width رنگی زمینه و opacity اون زیاد میشه (برای بار اول ) اما وقتی روی click me دوبار کلیک میکنیم تا box به حالت اول برگرده وقتی موسو روی box میبریم خاصیت width اون تغییر نمیکنه در صورتی که رنگ زمینه و opacity اون تغییر میکنه مشکل کار کجاست ؟
ممنون