FadeIn پس زمینه Div

[Web.Designer01]

سلام
با JQuery میشه یه slector نوشت که backround یه div رو fadeIn و FadeOut کنه؟


<script type="text/javascript">
$(document).ready(function(){
$("#Div").mouseover(
function(){$(this).fadein('slow'); });
});
$(document).ready(function(){
$("#Div").mouseOut(
function(){$(this).fadeOut('slow'); });
});
</script>

این کد کل محتویات div رو fadeIn و FadeOut میکنه،من فقط میخوام رو backroundش عمل کنه.

[eyes_shut_number1]

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

[Web.Designer01]

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');


ممنون،ولی میگه Invalid property value و اجراش نمیکنه:ناراحت:

[eyes_shut_number1]

jquery شما نسخه چنده؟ من با 1.3 کار کردم و مشکلی نداشت

[Web.Designer01]

jquery شما نسخه چنده؟ من با 1.3 کار کردم و مشکلی نداشت
1.4.2
یعنی مشکل از نسخه جی کوئریه؟!
من همونجوری پروپرتیای دیگشو که امتحان میکنم جواب میده،مثل opacity
ولی همونطور که گفتم میخوام فقط Backroundش به آرومی محو شه،راه دیگه ای به جز این نداره؟

[mehdi.mousavi]

سلام.
کد شما در صورتی کار میکنه که Color Animation Plugin (http://plugins.jquery.com/project/color) رو در برنامه خودتون include کنید. در غیر اینصورت، شما نمی تونید Background Color مورد نظر رو Animate کنید.

موفق باشید.

پاورقی: فکر میکنم این توانایی به jQuery UI افزوده شده باشه، در نتیجه اگر از jQuery UI استفاده کنید، کدی که بهتون دادن کار خواهد کرد.

[Web.Designer01]

سلام.
کد شما در صورتی کار میکنه که Color Animation Plugin (http://plugins.jquery.com/project/color) رو در برنامه خودتون include کنید. در غیر اینصورت، شما نمی تونید Background Color مورد نظر رو Animate کنید.

موفق باشید.

پاورقی: فکر میکنم این توانایی به jQuery UI افزوده شده باشه، در نتیجه اگر از jQuery UI استفاده کنید، کدی که بهتون دادن کار خواهد کرد.

آقای موسوی ممنون از جوابتون.
من اون فایل js که گفتید رو به برنامه اضافه کردم و برنامرو اینجوری نوشتم:(page-wrap آی دی تگ div هست)


<script type='text/javascript' src='js/jquery.color.js'></script>
<script type="text/javascript">

$(document).ready(function(){
$("#page-wrap").mouseover(
function(){ $("#page-wrap").animate({ backgroundColor: "#0033CC" }, 'slow');});
});
$(document).ready(function(){
$("#page-wrap").mouseout(
function(){$("#page-wrap").animate({ backgroundColor: "#f6f6f6" }, 'slow'); });
});

</script>

ولی اینبار از کد اون فایل js ایراد میگیره و میگه:
Microsoft JScript runtime error: 'start.0' is null or not an object
در ضمن من میخوام خصوصیت Background-Image تگ div تغییر بدم،اشکال کار کجاست به نظرتون؟

[mehdi.mousavi]

سلام.
کد مورد نظر درست کار میکنه. من کد رو اینجا قرار دادم (http://jsfiddle.net/5HbUp/2/) تا بتونید ببینید. (این سایت اسباب بازی جدید من هستش). وقتی روی مربع قرمز رنگ کلیک کنید، رنگش به مرور زمان (ظرف 5 ثانیه) به آبی تغییر میکنه. پس Plugin مزبور کاملا درسته و جای هیچ نگرانی ای نیست.

اما شما در پست آخر فرمودید که میخواهید Background-Image اتون تغییر کنه! خوب، این که اصلا صورت مساله رو تغییر میده و دیگه ربطی به تغییر رنگ پس زمینه نداره. لطفا بگید دقیقا نیازتون چی هستش. میخواهید تصویر پس زمینه رو با چی عوض کنید؟ (اگر Source خودتون رو بذارید، سریعتر پاسخ می گیرید).

موفق باشید.

[Web.Designer01]

آقای موسوی واقعا ممنون از اینکه وقت میذارید و جواب میدید.
اون لینکی که گذاشتینو دیدم(خیلی جالب بود)،اونجا داره جواب میده ولی نمیدونم چرا تو سورس برنامه من که میره دیگه جواب نمیده.
من از اولم هدفم این بود که وقتی کاربر موس رو میبره روی div مورد نظر تصویر پس زمینه اون به آرومی روشن شه(FadeIn) و وقتی موسو میبره اونور تصویرش کمرنگ شه(FadeOut) ولی دیگه دیدم دوستان backgroundColor رو تغییر دادن گفتم حتما اگه اون بشه اینم میشه دیگه حالا فعلا اینم نشده!!
حالا نمیدونم برای اینکار باید دوتا عکس روشن و تیره بسازم بعد بگم با اومدن و رفتن موس این عکسا برن جای BackgrounImage یا میشه همینجوری اون BackgroundImage رو کمرنگ و پررنگ کرد،امیدوارم تونسته باشم منظورمو برسونم،این رسوندن منظورم کار خیلی سختیه ها!

[mehdi.mousavi]

سلام.
برای اینکه نحوه تغییر تصویر پس زمینه به تصویر مورد نظر رو نشون بدم (که دیگه نیازی به Color Animation Plugin هم نداره)، ظرف چند دقیقه این مثال (http://jsfiddle.net/5HbUp/3/) رو درست کردم. Mouse رو روی آرم Google Canada Day ببرید، اونو با آرم اصلی گوگل عوض میکنه. هنگامیکه Mouse رو از روی آرم مربوطه کنار ببرید، تصویر قبلی مجددا FadeIn میشه (و فعلی FadeOut)...

موفق باشید.

[Web.Designer01]

سلام.
برای اینکه نحوه تغییر تصویر پس زمینه به تصویر مورد نظر رو نشون بدم (که دیگه نیازی به Color Animation Plugin هم نداره)، ظرف چند دقیقه این مثال (http://jsfiddle.net/5HbUp/3/) رو درست کردم. Mouse رو روی آرم Google Canada Day ببرید، اونو با آرم اصلی گوگل عوض میکنه. هنگامیکه Mouse رو از روی آرم مربوطه کنار ببرید، تصویر قبلی مجددا FadeIn میشه (و فعلی FadeOut)...

موفق باشید.
ممنون،ولی این مثال در حقیقت با رفتن موس روی تگ Div با آی دی Logo1 تگ Div با آی دی Logo2 رو نشون میده،شما فرض کنید توی این Divها اطلاعات دارید مثل اینجا http://jsfiddle.net/5HbUp/4/،خب اونوقت دیگه درست کار نمیکنه دیگه!
من نمیخوام با رفتن موس روی یه div یه div دیگرو نشون میده فقط میخوام Background همون div عوض شه(یا کمرنگ و پررنگ شه)

[mehdi.mousavi]

ممنون،ولی این مثال در حقیقت با رفتن موس روی تگ Div با آی دی Logo1 تگ Div با آی دی Logo2 رو نشون میده،شما فرض کنید توی این Divها اطلاعات دارید مثل اینجا http://jsfiddle.net/5HbUp/4/،خب اونوقت دیگه درست کار نمیکنه دیگه! من نمیخوام با رفتن موس روی یه div یه div دیگرو نشون میده فقط میخوام Background همون div عوض شه(یا کمرنگ و پررنگ شه)

سلام.
منظورتون از کمرنگ و پر رنگ شدن، تغییر Opacity ی Background Image هستش؟ یا نه، منظورتون اینه که همون div پس زمینه فعلیش ظرف مدت زمان مشخصی محو بشه و در همون حال، پس زمینه جدید شروع به ظاهر شدن کنه؟ اگر منظورتون این دومی هستش، متاسفانه نمیتونید با یک div اینکارو کنید. چون در حقیقت به دو تصویر نیاز دارید که همزمان یکیش Opacity اش کم بشه و دیگری Opacity اش زیاد. طبیعتا شما نمیتونید روی یک Element این دو کار رو با هم انجام بدید.

تنها روشی که وجود داره اینه که Element فعلی رو Copy کنید (منظورم Duplicate هستش)، و بعد element فعلی Insert اش کنید، بعد با تغییر Opacity این دو element به هدفتون برسید (که خوب، این کاری هستش که دقیقا Background Image Transition Plugin (http://plugins.jquery.com/project/bgImageTransition) انجام میده). من راستش متوجه نمیشم چرا خودتون رو محدود به یک div می کنید؟ یا چرا از img tag استفاده نمی کنید و با Absolute Positioning به هدفتون نمی رسید...

موفق باشید.

[Web.Designer01]

سلام.
منظورتون از کمرنگ و پر رنگ شدن، تغییر Opacity ی Background Image هستش؟
سلام مجدد،بله آقای موسوی منظور من دقیقا همینه:لبخندساده:
از اولم هدفم این بود که BackgroundImage تگ Div رو کمرنگ و پررنگ کنم ولی خب تا الان موفق نشدم،میتونم کل div رو کمرنگ و پررنگ کنم اما فقط Background Image رو نمیتونم.

[mehdi.mousavi]

سلام مجدد،بله آقای موسوی منظور من دقیقا همینه:لبخندساده:
از اولم هدفم این بود که BackgroundImage تگ Div رو کمرنگ و پررنگ کنم ولی خب تا الان موفق نشدم،میتونم کل div رو کمرنگ و پررنگ کنم اما فقط Background Image رو نمیتونم.

سلام.
اینو نگاه کنید: http://jsfiddle.net/5HbUp/8

اینجا من از دو div استفاده کردم (چون شما نمیتونید بدون ساخت یه Element جدید، اینکارو کنید). میتونید div ای رو که background-image رو بهش assign می کنید، توی runtime قبل از element اصلی (در واقع contents) قرار بدید، اما خوب، نتیجه همینی هستش که در این لینک ساختم. اگر فکر می کنید این هم کارتون رو راه نمیندازه، لطفا برام توضیح بدید که این محدودیت استفاده از یک div از کجا اومده؟

موفق باشید.

پاورقی: اینجا دیگه یه div دارید که Content مورد نظر رو نشون میده، یکی هم برای background-image و کار fade-in و fade-out استفاده میشه. در نتیجه Content با background-image شما opacity اش تغییر نمیکنه.