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

[jistili1 2]

سلام.ببخشید من توی 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 میمونه و نمایان نمیشه.مشکلش چیه؟

[cherry 390]

سلام @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");
});
});

 

ویرایش شده بهمن 97 توسط cherry

[jistili1 2]

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

<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 نمایان بشه.ولی این این بخش دوم انجام نمیشه.حالا اگه بخش اول که برای چسبان کردن منو هست رو پاک کنم بخش دوم بدون مشکل اجرا میشه.خواهش میکنم کمکم کنید اصن موندم توش.

ویرایش شده بهمن 97 توسط jistili1

[mehran-b 2385]

سلام و درود @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");
    });

});

 

[jistili1 2]

در 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");
    });

});

 

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

[mehran-b 2385]

در 26 دقیقه قبل، jistili1 گفته است :

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

خواهش میکنم.

موفق باشید