ورود

View Full Version : حرفه ای: تغییر رنگ کم کم یک عنصر متن در صفحه


arashmanteghi
سه شنبه 15 آذر 1390, 19:51 عصر
سلام دوستان، وقت بخیر.
من میخوام یه عنصر متن، مثلاً متنی که به جایی لینک شده، با قرار گرفتن موس بر روش کم کم تغییر کنه، نمیخوام یهو عوض شه. فکر کنم با css3 یا وب کیت یا یه همچین چیزهایی ممکن باشه.
از شما میخوام کمکم کنید.
برای نمونه به وبلاگ آقای سالار کابلی (http://sallar.me/blog/) یه سر بزنید.
میبینید که وقتی موس رو روی عنوان بلاگ (نام صاحب وبلاگ) میزاریم به آرامی و نرمی تغییر رنگ میده.

این چطور امکان پذیره؟ حتی مثلاً یه چیزه دیگه. این بلاگ رو ببینید: http://armanam.net/
و به ظاهر شدن و محو شدن ادامه مطلب دقت کنید. الته یه مقدار سریع ضاهر میشه اما کم کم محو میشه. در این مورد چطور؟
dorparasti
سه شنبه 15 آذر 1390, 23:48 عصر
اینکارا رو با تابع animate مربوط به JQuery میشه انجام داد . چیزی شبیه این


$("#MyLogo").hover(function(){
$(this).animate({opacity:.2},500);
},function(){
$(this).animate({opacity:1},1000);
);

که اون 500 و 1000 مدت زمان اجرای افکت هست بر مبنای میلی ثانیه .function اولی برای محو کردن و function دومی برای برگشتن به حالت عادی
arashmanteghi
چهارشنبه 16 آذر 1390, 12:42 عصر
دوست عزیز با تشکر از شما، متأسفانه من نتونستم از این کد استفاده کنم. من سر رشته زیادی از jquery ندارم و از این نظر ضعف دارم.
بعد از اینکه کتابخانه jquery رو به صفحه اضافه کردم و قطعه کد شما رو در تگ script نوشتم. خواستم به این صورت فراخوانی کنم:


<p id="MyLogo">This is test</p>

اما نتیجه ای حاصل نشد.
J.Masomi
چهارشنبه 16 آذر 1390, 13:46 عصر
با سلام در مورد وبلاگ که دادید : تنها یک css ساده است همین:


<style>
#test{
color: #000;
}
#test:hover{
opacity:0.2;
}
</style>
<h1 id="test">تـــــــــــــست مطــــــــــــلبـــــــــ ــــ</h1>

کافیه اینرا کمی تغییر بدهی. البته اگر بخواهی سرعت انتقال را تغییر بدهی باید از همانی که گفتند استفاده کنی.
ravand
چهارشنبه 16 آذر 1390, 14:32 عصر
اينو امتحان كن:

<style type="text/css">
A{ text-decoration: none}
/*براي برداشتن خط زير لينك */
A:hover{color:#18E17B; font-size:12pt;}
/*براي تغيير رنگ لينك*/
</style>
<a href="http://barnamenevisi.blogsky.com/">وبلاگ </a>
dorparasti
چهارشنبه 16 آذر 1390, 16:52 عصر
این رو ذخیره و امتحان کن :


<html>
<head>
<title>JQuery Animate</title>
<script language="javascript" src="jquery.js"></script>
<script>
$(function(){

$("#MyLogo").hover(function(){
$(this).animate({opacity:.2},500);
},function(){
$(this).animate({opacity:1},1000);
});

});

</script>
</head>
<body>
<div id="MyLogo"><h1>This is My Logo</h1></div>
</body>
</html>
arashmanteghi
چهارشنبه 16 آذر 1390, 21:30 عصر
این رو ذخیره و امتحان کن :


<html>
<head>
<title>JQuery Animate</title>
<script language="javascript" src="jquery.js"></script>
<script>
$(function(){

$("#MyLogo").hover(function(){
$(this).animate({opacity:.2},500);
},function(){
$(this).animate({opacity:1},1000);
});

});

</script>
</head>
<body>
<div id="MyLogo"><h1>This is My Logo</h1></div>
</body>
</html>

با تشکر از شما دوسته عزیز. البته دوستان دیگه هم زحمت این کار رو با css کشیدن، ولی اونو بلد بودم. قطعه کد شما بسیار به من کمک کرد.
امیدوار بودم با css3 هم بشه این کار رو کرد.