PDA

View Full Version : سوال: ایجاد افکت باز با جی کوئری (تگ دایو به بیرون باز بشه و بعد محتویات اون کم کم از حالت محو خارج بشن)


idocsidocs
شنبه 24 دی 1390, 16:09 عصر
من می خوام وقتی کاربر ماوس رو روی یه تگ دایو می بره، تگ دایو به بیرون باز بشه و همزمان با باز شدن اون محتویاتش از حالت محو شدن خارج بشن و وقتی تگ دایو به طور کامل باز شد محتویات تگ هم کاملا نمایان بشن.

چطور می تونم این کار رو انجام بدم؟
crazy_1892
شنبه 24 دی 1390, 17:45 عصر
http://alimohajer.persiangig.com/JavaScriptCode/java--code.htm

http://aliha.ir/
Saber Mogaddas
شنبه 24 دی 1390, 17:50 عصر
سلام
شما با jquery و دستور animate می تونید به راحتی این کا رو می تونید انجام بدید اگه با jquery مشکل دارید می تونید فایل html تون رو بدید تا کمکتون کنم..
موفق باشی..
idocsidocs
شنبه 24 دی 1390, 18:07 عصر
شما با jquery و دستور animate می تونید به راحتی این کا رو می تونید انجام بدید اگه با jquery مشکل دارید می تونید فایل html تون رو بدید تا کمکتون کنم..
یبه نمونه کد ارائه می دید؟
ravand
شنبه 24 دی 1390, 18:36 عصر
من می خوام وقتی کاربر ماوس رو روی یه تگ دایو می بره، تگ دایو به بیرون باز بشه و همزمان با باز شدن اون محتویاتش از حالت محو شدن خارج بشن و وقتی تگ دایو به طور کامل باز شد محتویات تگ هم کاملا نمایان بشن.

چطور می تونم این کار رو انجام بدم؟

ميشه سوالتون رو واضح تر مطرح كنيد شايد من بتونم كمكتون كنم؟
شما ميخواي صفحه اي مثلا با كليك باز بشه اونم به شكلي كه كم كم از حالت محو شدن خارج بشه و يك صفحه ي كامل ديده بشه؟
idocsidocs
شنبه 24 دی 1390, 18:56 عصر
ميشه سوالتون رو واضح تر مطرح كنيد شايد من بتونم كمكتون كنم؟
توی منوهای کنترل پنل یه تگ دایو دارم که چندتا لینک و آیکن توی این تگ دایو بصورت مخفی وجود داره. من می خوام وقتی کاربر ماوس رو روی این تگ می بره تگ دایو به سمت بیرون باز بشه و همزمان لینکها و آیکنها از حالت محو خارج بشن.

وقتی ماوس رو از روی تگ دایو برداشت، تگ و لینکها دوباره به همون حالت اول برگردن.
ravand
شنبه 24 دی 1390, 19:34 عصر
يه متني رو نوشتم كه وقتي ماوس ميره روش يه صفحه اي رو باز كنه و وقتي از روش برداشته ميشه اون صفحه بره. حالا اگه اين اون چيزي نيست كه ميخواستي بگو تا بيشتر روش كار كنم.

<html>
<head>
<style>
#mokaab{
width:50px;
height:50px;
border:2px #072046 solid;
}
#mouse{
width:50px;
height:50px;
border:0px #072046 solid;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#mokaab").hide();
$("#mouse").hover(function(){
$("#mokaab").show({opacity:.2},500);
});

$("#mouse").mouseout(function(){
$("#mokaab").hide();
});
});
</script>
</head>
<body>
<div id="mouse">
mouse
</div>
<div id="mokaab">
Hello
</div>
</body>
</html>
idocsidocs
شنبه 24 دی 1390, 19:58 عصر
يه متني رو نوشتم كه وقتي ماوس ميره روش يه صفحه اي رو باز كنه و وقتي از روش برداشته ميشه اون صفحه بره. حالا اگه اين اون چيزي نيست كه ميخواستي بگو تا بيشتر روش كار كنم.الان یه موضوع هست. وقتیتگ افکت روش اعمال می شه، چطور می شه بلافاصله با خارج شدن موس از روی اون تگ اجرای افکت رو متوقف کرد؟
ravand
شنبه 24 دی 1390, 20:09 عصر
من كد رو تغييرش دادم به آرامي باز ميشه و به آرامي بسته ميشه . حالا اين خوبه يا حتما بايد با اون دو تابعي باشه كه گفتيد؟

<html>
<head>
<style>
#mokaab{
width:50px;
height:50px;
border:2px #072046 solid;
}
#mouse{
width:50px;
height:50px;
border:0px #072046 solid;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#mokaab").hide();
$("#mouse").hover(function(){
$("#mokaab").show({opacity:.2},500);
});
$("#mouse").mouseout(function(){
$("#mokaab").hide(500);
});
});
</script>
</head>
<body>
<div id="mouse">
mouse
</div>
<div id="mokaab">
Hello
</div>
</body>
</html>
idocsidocs
شنبه 24 دی 1390, 20:16 عصر
این کدها چرا اجرا نمی شن؟
وقتی افکت slideDown به پایان رسید باید افکت animate روی تگ mokaab1 (این تگ رو خودم اضافه کرد) اجرا بشه که این اتفاق نمیافته و فقط slideDown انجام می شه.
$("#mouse").hover(function(){
$("#mokaab").slideDown(500, function(){
$("#mokaab1").animate({height : "100px"}, 100)
});
});
idocsidocs
شنبه 24 دی 1390, 20:19 عصر
مرسی مشکل حل شد. حواسم به استایل نبود و استایل اجازه نمی داد که کدها درست اجرا بشن !
ravand
شنبه 24 دی 1390, 20:19 عصر
خط سوم سمي كالون ميخواد. ;

$("#mokaab1").animate({height : "100px"}, 100);