رفتن به مطلب

اجرا نشدن fadeIn در جی کوئری


پست های پیشنهاد شده

سلام.ببخشید من توی html همچین کدی دارم:

<div id="ses">
				<div class="cou button hvr-underline-from-right"><img src="images/creative-css3-tutorials.jpg" alt="css"><span>دوره آموزش صفر تا صد CSS3</span></div>
				<div class="cou button hvr-underline-from-right"><img src="images/html32.png" alt="css"><span>دوره آموزش صفر تا صد HTML5</span></div>	
		</div>

استایل زیر رو هم داره:


#ses{
	width: 100%;
	height: 50px;
	background: #2193b0;
    background: -webkit-linear-gradient(left, #6dd5ed, #2193b0);
    background: -o-linear-gradient(left, #6dd5ed, #2193b0);
    background: linear-gradient(to right, #6dd5ed, #2193b0);
	display: none;
	justify-content:center;
	align-items: center;
}

ولی کد جی کوئری زیر که برای نمایان کردن این div هست کار نمیکنه:

$("#amozesh").hover(function(){
		$("#ses").fadeIn();
	});

یعنی div همینجور با display:none میمونه و نمایان نمیشه.مشکلش چیه؟

لینک به ارسال

سلام @jistili1

شما کدتون رو اینجوری بنویسید مشکل حل میشه

$(document).ready(function() {
$("#amozesh").mouseover(function(){
  $("#ses").fadeIn(600);
});
$("#amozesh").mouseout(function(){
  $("#ses").fadeOut(600);
});
});

و برای hover باید به اینصورت استفاده کنید

$(document).ready(function(){
$("#amozesh").hover(function(){
  $("#ses").css("display", "inline-block");
}, function(){
  $("#ses").css("display", "none");
});
});

 

ویرایش شده توسط cherry
لینک به ارسال

ببخشید بازم مشکل من حل نشد.اجازه بدید فایل هام رو به صورت بازتر براتون بزارم:

<div id="menudad">
		<div id="menu">
			<img src="images/ORG_LOGO.png" alt="logo" id="logo">
				<ul>
					<li>صفحه اصلی</li>
					<li id="amozesh">آموزش ها</li>
					<li>پشتیبانی</li>
					<li>درباره ما</li>
				</ul>
		</div>
		<hr id="hr">
		<div id="ses">
				<div class="cou button hvr-underline-from-right"><img src="images/creative-css3-tutorials.jpg" alt="css"><span>دوره آموزش صفر تا صد CSS3</span></div>
				<div class="cou button hvr-underline-from-right"><img src="images/html32.png" alt="css"><span>دوره آموزش صفر تا صد HTML5</span></div>	
		</div>
		</div>
#menu{
	width: 100%;
	height: 50px;
	background: #EBEBEB;
	box-shadow: 1px 1px 1px 1px black;
	margin-top: 50px;
}

#menu ul{
	float: right;
	list-style: none;
}

#menu ul li{
	float: right;
	margin-right: 20px;
	font-family:mitra;
	font-size: 20px;
	line-height: 15px;
	cursor: pointer;
	font-weight: bold;
}


#ses{
	width: 100%;
	height: 50px;
	background: #2193b0;
    background: -webkit-linear-gradient(left, #6dd5ed, #2193b0);
    background: -o-linear-gradient(left, #6dd5ed, #2193b0);
    background: linear-gradient(to right, #6dd5ed, #2193b0);
	display: none;
	justify-content:center;
	align-items: center;
}
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
$(document).ready(function(){
	
var $a= $.noConflict(true);
    $a(window).scroll(function(){
        if ($a(window).scrollTop() >= 150) {
           $a('#menudad').addClass('fixed-header');
           $a('#menu').css('margin-top','0');
        }
        else {
           $a('#menudad').removeClass('fixed-header');
            $a('#menu').css('margin-top','50px');
        }
    });
	
  	
	$("#amozesh").hover(function(){
		$("#ses").css("display","flex");
	});
  
});

به کد جی جوئری دقت کنید.کلن دو بخشه.بخش اول رو برای چسبان کردن منو نوشتم.قسمت دوم هم برای اینکه وقتی روی #amozesh هاور میکنیم #ses نمایان بشه.ولی این این بخش دوم انجام نمیشه.حالا اگه بخش اول که برای چسبان کردن منو هست رو پاک کنم بخش دوم بدون مشکل اجرا میشه.خواهش میکنم کمکم کنید اصن موندم توش.

ویرایش شده توسط jistili1
لینک به ارسال

سلام و درود @jistili1

 

شما توی خط سوم کد جاوا اسکریپتتون گفتید آبجکت جی کوئری بره توی متغییر $a و سایر متغییرهاشو کلا حذف کنه.

بنابراین اتفاقی که افتاده دیگه $ توش آبجکت جی کوئری نیست و باید از $a استفاده کنید.

$(document).ready(function() {

    var $a = $.noConflict(true);
    $a(window).scroll(function() {
        if ($a(window).scrollTop() >= 150) {
            $a('#menudad').addClass('fixed-header');
            $a('#menu').css('margin-top', '0');
        } else {
            $a('#menudad').removeClass('fixed-header');
            $a('#menu').css('margin-top', '50px');
        }
    });


    $a("#amozesh").hover(function() {
        $a("#ses").css("display", "flex");
    });

});

 

لینک به ارسال
در 14 دقیقه قبل، mehran-b گفته است :

سلام و درود @jistili1

 

شما توی خط سوم کد جاوا اسکریپتتون گفتید آبجکت جی کوئری بره توی متغییر $a و سایر متغییرهاشو کلا حذف کنه.

بنابراین اتفاقی که افتاده دیگه $ توش آبجکت جی کوئری نیست و باید از $a استفاده کنید.


$(document).ready(function() {

    var $a = $.noConflict(true);
    $a(window).scroll(function() {
        if ($a(window).scrollTop() >= 150) {
            $a('#menudad').addClass('fixed-header');
            $a('#menu').css('margin-top', '0');
        } else {
            $a('#menudad').removeClass('fixed-header');
            $a('#menu').css('margin-top', '50px');
        }
    });


    $a("#amozesh").hover(function() {
        $a("#ses").css("display", "flex");
    });

});

 

ای دمت گرم الان متوجه شدم.حل شد.ممنون.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...