ورود

View Full Version : ایجاد افکت افتادن یک دایو و نمایش دایو زیرین با css


sara_aryanfar
سه شنبه 13 دی 1390, 00:21 صبح
چطوری می تونم دوتا دایو داشته باشم که یکی در زیر دیگری باشه و نمایان نباشه وقتی موس روش رفت دایو اولی با افکت به پائین بیفته و دایو پشتی نمایش داده بشه ووقتی موس کنار رفت دوباره اون یکی دایو بیاد سر جاش
hamid_shrk
سه شنبه 13 دی 1390, 09:10 صبح
این کار رو با افکت toggle جی کو ئری میتونی انجام بدی :
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideUp/
http://jsfiddle.net/mvelaga/de4FE/1/
http://www.bennadel.com/blog/1827-Using-jQuery-s-SlideUp-and-SlideDown-Methods-With-Bottom-Positioned-Elements.htm
maryamm_20
سه شنبه 13 دی 1390, 10:06 صبح
با خا صیت z-index می تونی تعیین کنی کدوم لایه زیر و رو باشه
و با افکت های jquery می تونیم نحوه نمایششو تعیین کنیم
sara_aryanfar
سه شنبه 13 دی 1390, 11:25 صبح
با تشکر من با این کد این کارو انجام میدم اما یه مشکلی داره از پائین به بالا دایو جمع میشه و اینکه هر جا موس باشه تا اونجا میره
<script type="text/javascript">
$(document).ready(function () {
$('.s2').hover(function () {
$(this).stop().animate({ height:"0px"}, 'slow');
},
function () {
$(this).stop().animate({ height:"362px"}, 'slow');
});
});
</script>
Saber Mogaddas
سه شنبه 13 دی 1390, 11:27 صبح
سلام
در مورد درخواست شما تو تاپیکی دیگه بحث شده و sample نیز گذاشتم میتونید پیداش کنید..
با jQuery می تونید با دستور hover بگید وقتی که mouseover شد z-index دیو پایینی رو بیشتر کنید و بر عکس برای mouseleave نیز به حالات پیش فرض تبدیل کنه..
موفق باشی..
Saber Mogaddas
سه شنبه 13 دی 1390, 11:32 صبح
به ستایل S2 ، position:relative بدید..
و کد رو به این صورت تغییر بدید..


<script type="text/javascript">
$(document).ready(function () {
$('.s2').hover(function () {
$(this).animate({ z-index:"-1"}, 'slow');
},
function () {
$(this).animate({ z-index:"1000"}, 'slow');
});
});
</script>



اگه مشکل حل نشد فایل html رو ضمیمه کنید نا من این کارو براتون انجام بدم..
sara_aryanfar
سه شنبه 13 دی 1390, 11:58 صبح
اون یکی مثالتون رو دیدم ولی اون فقط اندازه دایو رو عوض می کنه کد بالا هم عمل نکرد در واقع یه چیزی تو این مایه ها مد نظر من هست http://www.hiberd.com/ بالاش چهارتا عکس هست که موس وقتی میره روش عکس کنار میره حالا مد نظر من اینه که عکس پائین بیفته
Saber Mogaddas
سه شنبه 13 دی 1390, 12:18 عصر
سلام
دوست من شما فایل html اونچیزی که می خواهیدو بنویسید و فایلشو بدید تا من کد jquery شو براتون بنویسم..
موفق باشید..
sara_aryanfar
سه شنبه 13 دی 1390, 12:49 عصر
راستش فایل خاصی نداره فقط به عنوان تمرین دارم روش کار می کنم دوتا دایو ساده هست که هم اندازه هستن همین
ravand
سه شنبه 13 دی 1390, 15:21 عصر
يه چيزي ساختم توي مايه هاي اون چيزي كه شما ميخواي. چون زياد با توابع جاوا اسكريپت آشنايي ندارم . چيزي كه ساختم اونطوري كه شما ميخواي نيست . ولي تا حدودي به اون ميخوره. :لبخند:


<html>
<head>
<style>
.opacity
{
position:absolute;
width:130px;
height:180px;
border:2px #F412EC solid;
z-index:2;
background:url("D:\aks-d\tazekand-maku.jpg") no-repeat left top;
}
.matn{
position:absolute;
width:130px;
height:180px;
z-index:1;
text-align:center;
border:2px #F412cc solid;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".opacity").mouseover(function () {

$('.opacity').hide( "opacity");

});
$(".opacity").mouseout(function () {
$(this).show(".opacity");
});
});
</script>
</head>
<body>
<div class="opacity">
</div>
<div class="matn">
اين متن است
</div>
</body>
</html>