PDA

View Full Version : سوال: fade کردن عکس



mahdi87_gh
جمعه 21 اسفند 1388, 23:42 عصر
سلام
من میخوام وقتی که موس بروی عکس قرار میگیره،عکس کمی محو بشه و وقتی موس روی عکی نباشه، عکس کاملا واضح یا همون در واقع حالت معمولیش دیده بشه.
دوستان چطوری این کارو با jquery انجام بدم؟
ممنون

mehdi.mousavi
شنبه 22 اسفند 1388, 00:06 صبح
سلام
من میخوام وقتی که موس بروی عکس قرار میگیره،عکس کمی محو بشه و وقتی موس روی عکی نباشه، عکس کاملا واضح یا همون در واقع حالت معمولیش دیده بشه.
دوستان چطوری این کارو با jquery انجام بدم؟
ممنون

سلام.

<script type="text/javascript">
$(function() {
$('img').hover(function() {
$(this).animate({ 'opacity': .5 }, 700);
}, function() {
$(this).animate({ 'opacity': 1 }, 700);
});
});
</script>


دقت کنید! من کد رو تو notepad نوشتم، ممکنه ایرادهایی داشته باشه، اما منظور رو میرسونه.

mahdi87_gh
شنبه 22 اسفند 1388, 18:50 عصر
لطفا اگه امکان داره یه sample بزارین
خیلی ممنون

mehdi.mousavi
شنبه 22 اسفند 1388, 19:10 عصر
لطفا اگه امکان داره یه sample بزارین خیلی ممنون

شوخی می کنید؟ چیزی که نوشتم Sample بود دیگه...

Sajjad.Aghapour
شنبه 22 اسفند 1388, 19:14 عصر
مهدی جان سلام....
یه سوال:
من این کد رو امتحان کردم.وقتی Handler دوم fire میشه تا وقتی تموم نشده اولی fire نمیشه.یعنی در حالت FadeOut وقتی دوباره موس رو روی عکس میبری FadeIn انجام نمیشه تا وقتی FadeOut تموم شه....

چطوری میشه این مشکل رو رفعش کرد؟
اصلا این یه مشکل محسوب میشه؟

mehdi.mousavi
شنبه 22 اسفند 1388, 21:58 عصر
مهدی جان سلام.... یه سوال: من این کد رو امتحان کردم.وقتی Handler دوم fire میشه تا وقتی تموم نشده اولی fire نمیشه.یعنی در حالت FadeOut وقتی دوباره موس رو روی عکس میبری FadeIn انجام نمیشه تا وقتی FadeOut تموم شه.... چطوری میشه این مشکل رو رفعش کرد؟ اصلا این یه مشکل محسوب میشه؟

سلام.
اینکه این مشکل محسوب میشه یا نه، بستگی به این داره که ما صورت مساله رو چی تعریف کرده باشیم. چیزی که شما می خواهید، بدین شکل میسره:

$(function() {
$('img').hover(function() {
$(this).stop(true, false).animate({ 'opacity': .5 }, 700);
}, function() {
$(this).stop(true, false).animate({ 'opacity': 1 }, 700);
});
});


اینجا من با stop دارم در واقع queue رو خالی میکنم، و با پارامتر دوم stop دارم میگم animation رو به state آخر خودش نبر. در نتیجه، مشکلی که شما مطرح کردید دیگه رخ نخواهد داد.

mahdi87_gh
شنبه 22 اسفند 1388, 23:29 عصر
شوخی می کنید؟ چیزی که نوشتم Sample بود دیگه...
اینکه گفتم یه sample بزارین بخاطر این بود که من ]چندان جاوا رو بلد نیستم و دقیقا نمیدونم کدی که گذاشتین رو باید در کجا قرار بدم!!
بهرحال ممنون

mehdi.mousavi
شنبه 22 اسفند 1388, 23:47 عصر
اینکه گفتم یه sample بزارین بخاطر این بود که من ]چندان جاوا رو بلد نیستم و دقیقا نمیدونم کدی که گذاشتین رو باید در کجا قرار بدم!!
بهرحال ممنون

آهان! خوب اینو از اول می گفتید. یک فایل html بسازید و اینو توش کپی کنید:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('img').hover(function() {
$(this).stop(true, false).animate({ 'opacity': .5 }, 700);
}, function() {
$(this).stop(true, false).animate({ 'opacity': 1 }, 700);
});
});
</script>
</head>
<body>
<img src="myimage.jpg" />
</body>
</html>

موفق باشید.

mahdi87_gh
دوشنبه 24 اسفند 1388, 21:37 عصر
یک فایل html بسازید و اینو توش کپی کنید
دوست عزیز این کارو کردم ولی عکس رو fade نمیکنه که!
کجا رو اشتباه کردم؟

mehdi.mousavi
دوشنبه 24 اسفند 1388, 22:08 عصر
دوست عزیز این کارو کردم ولی عکس رو fade نمیکنه که!
کجا رو اشتباه کردم؟

سلام.
جای <!DOCTYPE نوشته اید !DOCTYPE
اینو تصحیح کنید، درست میشه.

موفق باشید.

sh2010
دوشنبه 17 خرداد 1389, 01:13 صبح
سلام
کدی که گذاشتید عالی کار می کنه. فقط من یه مشکلی دارم چون قبلا از تعریف زیر استفاده کردم
<script type="text/javascript" src="jquery.min.js"></script>
وقتی مجدد خط جهارم کد شما رو می ذارم فقط قابلیت fade کردن کار می کنه و کدهای جاوااسکریپت قبلیم از کار می افتن. میشه بگین اشکال کارم کجاست؟ ازچه تعریفی باید استفاده کنم که تمام کدهام جواب بدن
ممنون

mehdi.mousavi
دوشنبه 17 خرداد 1389, 12:59 عصر
سلام
کدی که گذاشتید عالی کار می کنه. فقط من یه مشکلی دارم چون قبلا از تعریف زیر استفاده کردم
<script type="text/javascript" src="jquery.min.js"></script>
وقتی مجدد خط جهارم کد شما رو می ذارم فقط قابلیت fade کردن کار می کنه و کدهای جاوااسکریپت قبلیم از کار می افتن. میشه بگین اشکال کارم کجاست؟ ازچه تعریفی باید استفاده کنم که تمام کدهام جواب بدن
ممنون

سلام.
روی صحبتتون چه کسی هستش؟ :لبخندساده:
خط چهارم کدوم کد؟

لطفا کدهاتون رو اینجا قرار بدید تا در موردش بتونیم صحبت کنیم.

موفق باشید.

majidmjh
پنج شنبه 27 خرداد 1389, 22:39 عصر
مهدی جان قضیه این true , false رو یه توضیح کوچیک می دی ؟! خیلی جالبه ! ممنون :)



$(this).stop(true, false).animate({ 'opacity': 1 }, 700);


من برای فرار از رفت و برگشت های مکرر این کار رو می کردم :



$(this).removeAttr("style");


برای همین برگشت به حالت قبل animate نداشت !!! :ناراحت:

mehdi.mousavi
شنبه 29 خرداد 1389, 23:53 عصر
مهدی جان قضیه این true , false رو یه توضیح کوچیک می دی ؟! خیلی جالبه ! ممنون :) [code]
$(this).stop(true, false).animate({ 'opacity': 1 }, 700);


سلام.
متود stop باعث میشه تا animation در حال اجرا متوقف بشه. این متود دو پارامتر boolean میگیره. اولی نشون میده که آیا باید صف انیمیشن ها خالی بشه یا خیر. دومی تعیین میکنه که آیا animation در حال اجرا در آن واحد باید خاتمه پیدا کنه (یعنی به آخرین نقطه مورد نظر بپره، بدون مکث)، یا خیر، انیمیشن فعلی طبق انتظار ادامه پیدا کنه و در نهایت متوقف بشه.

موفق باشید.