jistili1

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

6 پست در این موضوع قرار دارد

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام @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
0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

<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
0

به اشتراک گذاری این پست


لینک به پست

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

});

 

4

به اشتراک گذاری این پست


لینک به پست
در 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");
    });

});

 

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

0

به اشتراک گذاری این پست


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

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

خواهش میکنم.

موفق باشید

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری