PDA

View Full Version : مبتدی: شرط برای اجرا نشدن قسمت callback



f_talebi
دوشنبه 14 مرداد 1392, 15:46 عصر
سلام من یه کد ساده نوشتم :
میخوام که وقتی ماوس روی .submenu2 قرار میگیره این انیمیشن اجرا نشه و ثابت بمونه. اگه کد رو اجرا کنین میبینین که کد درست اجرا نمیشه:ناراحت: البته یک مشکل دیگه هم داره ، میخوام روی هر groupdiv که برم فقط زیر منوی اون نمایش داده بشه... حالا نمیدونم چطور بنویسمش...لطفا منو راهنمایی کنید


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<style type="text/css">
*{ margin:0;
padding:0;}

a:link{color:#0F0;}
a:visited{color:#AFF;}
a:hover{color:mediumorchid;}
a:active{color:greenyellow;}

#rightmenu{background-color:rgba(20,30,40,.9);
float:right;
color:#AFF;
text-align:center;
direction:rtl;
list-style-type:none;}

.groupdiv{
height:30px; width:123px;
background-color:black;
border-radius:3px;}

.submenu2{
background-color:green;
border-radius:3px;
display:none;}

</style>

<script>
$(document).ready(function(){
$(".groupdiv").hover(function(){


$(".submenu2").slideDown({ duration: 2000, easing: "easeInBounce" });
},

function(){
$(".submenu2").slideUp({ duration: 2000, easing: "easeInBounce" });

});
});

</script>
</head>
<body>

<div id="rightmenu">
<div class="groupdiv">
<a href="#">دسته بندی </a>
</div>

<div class="submenu2">
<ul>
<li>
<a href="#">HTML</a>
</li>

<li>
<a href="#">CSS</a>
</li>

<li>
<a href="#">JavaScript</a>
</li>

<li>
<a href="#">jquery</a>
</li>
</ul>

</div>

<div class="groupdiv">
<a href="#">دسته بندی2 </a>
</div>

<div class="submenu2">
<ul>
<li>
<a href="#">PHP</a>
</li>

<li>
<a href="#">ASP.Net</a>
</li>

<li>
<a href="#">ASP</a>
</li>
</ul>

</div>
</div>
</body>
</html>

azamicu
دوشنبه 14 مرداد 1392, 16:35 عصر
سلام توی رخدادmouseover جایی که میخواین یعنی submenu2 چیزایی که به animate مربوطه رو غیر فعال بکن و تابع هاتم در پایین صفحه به اجزات بایند کن اینجوری بهتر و استاندارد تره:

$(".groupdiv").bind("mouseover", function(){

})

f_talebi
دوشنبه 14 مرداد 1392, 18:52 عصر
سلام توی رخدادmouseover جایی که میخواین یعنی submenu2 چیزایی که به animate مربوطه رو غیر فعال بکن و تابع هاتم در پایین صفحه به اجزات بایند کن اینجوری بهتر و استاندارد تره:

$(".groupdiv").bind("mouseover", function(){

})


یعنی اینجوری؟



<script>
$(document).ready(function(){
$(".groupdiv").hover(function(){


$(".submenu2").slideDown({ duration: 2000, easing: "easeInBounce" });
},

function(){
$(".submenu2").slideUp({ duration: 2000, easing: "easeInBounce" });

});
});

$(document).ready(function(){
$(".submenu2").mouseover(function(){
$(".submenu2").stop();
$(".groupdiv").stop();
});
});

$(document).ready(function(){
$(".groupdiv").bind("mouseover", function(){

})
});
</script>

یا اینجوری:


$(document).ready(function(){
$(".groupdiv").bind("mouseover", function(){

$(".submenu2").mouseover(function(){
$(".submenu2").stop();
$(".groupdiv").stop();
});
})
});

اما اینم درست کار نمیکنن. :افسرده:
تو w3 خوندم که bind رویدادی رو به المنتمون اختصاص میده ولی دقیقا متوجه مفهموم bind نشدم

Javidhb
دوشنبه 14 مرداد 1392, 23:40 عصر
سلام،
بهتر اسکریپتها رو انتهای قسمت <body> بنویسید.(که تمام اعضای صفحه لود شده باشن)
کدی که شما نوشتید هنوز جای کار داره; مثلا وقتی موس رو از submenu2. خارج میکنید باید slideup بشه.

کدی که خودتون گذاشتید، درستش اینجوری میشه:


<script>
$(function() {
$('.groupdiv').hover(
function(){
$(this).next('div.submenu2').slideDown({ duration: 2000, easing: "easeInBounce" });
},
function(){
$(this).next('div.submenu2').slideUp({ duration: 2000, easing: "easeInBounce" });
});

$(".submenu2").mouseover(function(){
$(this).stop();
$(this).parent().first().stop();
});
});
</script>

f_talebi
سه شنبه 15 مرداد 1392, 11:47 صبح
ممنون دوستان بهتر شد ولی باز هم کاملا درست اجرا نمیشه...

sinoser
سه شنبه 15 مرداد 1392, 15:53 عصر
ممنون دوستان بهتر شد ولی باز هم کاملا درست اجرا نمیشه...
خب بچه ها جوابای خوبی دادن الان دقیقا چه مشکلی داره ؟

f_talebi
سه شنبه 15 مرداد 1392, 21:19 عصر
اینو نوشتم ولی بازم کامل درست اجرا نمیشه:
اگه اجراش کنین متوجه میشین...



<script>

$(function() {
$('.groupdiv').hover(
function(){
$(this).next('div.submenu2').slideDown({ duration: 2000, easing: "easeInBounce" });
},
function(){
$(this).next('div.submenu2').slideUp({ duration: 2000, easing: "easeInBounce" });
});

$(".submenu2").mouseover(function(){
$(this).stop();
$(this).parent().first().stop();
$(this).next('div.submenu2').slideDown({ duration: 2000, easing: "easeInBounce" });
});
$(".submenu2").mouseleave(function(){
$('div.submenu2').slideUp({ duration: 2000, easing: "easeInBounce" });
$('div.submenu2').stop(true,true);
});
});

</script>


هنوز کار داره.. مثلا اگه کاربر ماوس رو روی منو و دایو همش حرکت بده بعد یهویی از محدوده دایو ها خارج بشه ببینین چندبار اجرا میشه! میدونم باید یه چیزی مثل این اضافه کنم :

$(".submenu2").mouseleave(function(){
$('div.submenu2').slideUp({ duration: 2000, easing: "easeInBounce" });
$('div.submenu2').stop(true,true);
});

و اضافه هم کردم. ولی شما بین دایو گروپ و زیر منو ها که ماوس رو جا به جا کنین متوجه میشین ک درست کار نمیکنه تو مواردی... مثلا زمانی که هنوز زیرمنو کامل باز نشده برین روش...:افسرده:
جالب اینجاست که هر دفعه ی جور اجرا میشه!!!!