Fade کردن دوتا DIV بعد از هم

[مهدی رحیم زاده]

سلام
من دوتا DIV توی یک صفحه دارم . می خوام که وقتی صفحه لود میشه DIV اول کم کم محو بشه و بعد دیگه نمایش داده نشه و وقتی که کاملا محو شود DIV دوم نمایش کم کم ظاهر بشه و در این بیشن DIV دوم بیاد و جای DIV اول رو بگیره.
با این کد DIV اول رو کم کم محو می کنم اما دیگه نمی دونم که چطور باید باقیش رو انجام بدم .

<script type="text/javascript" src="js\jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('div').stop(true, false).animate({ 'opacity': 0 }, 2000);
});
</script>

<div align="center" dir="rtl">
<asp:Image ID="Image1" runat="server" ImageUrl="~/SiteImage/js-pic/1.jpg" />
<br />
</div>

ممنون میشم راهنماییم کنید.
با تشکر

[mehdi.mousavi]

سلام من دوتا DIV توی یک صفحه دارم . می خوام که وقتی صفحه لود میشه DIV اول کم کم محو بشه و بعد دیگه نمایش داده نشه و وقتی که کاملا محو شود DIV دوم نمایش کم کم ظاهر بشه و در این بیشن DIV دوم بیاد و جای DIV اول رو بگیره. با این کد DIV اول رو کم کم محو می کنم اما دیگه نمی دونم که چطور باید باقیش رو انجام بدم

سلام.
وقتی animate کارش تموم بشه، پارامتر سومش رو که تابع هستش فراخوانی میکنه. بدین ترتیب کافیه بدین شکل عمل کنید:

$('div').stop(true, false).animate({ 'opacity': 0 }, 2000, function () {
$('#div2').animate({ 'opacity': 1 });
});


اینطوری وقتی opacity اولین div صفر بشه، تابع مربوطه فراخوانی میشه و div2 شروع به ظاهر شدن خواهد کرد.

موفق باشید.

[مهدی رحیم زاده]

جناب موسوی این کل کد صفحه من :

<%@ Page Language="C#" MasterPageFile="~/indexMasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript" src="js\jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('div').stop(true, false).animate({ 'opacity': 0 }, 2000, function () {
$('#div2').animate({ 'opacity': 1 });
});

});
</script>

<div id="div1" align="center" dir="rtl">
<asp:Image ID="Image1" runat="server" ImageUrl="~/SiteImage/js-pic/1.jpg" />
</div>
<div align="center" dir="rtl" id="div2">
<asp:Image ID="Image2" runat="server" ImageUrl="~/SiteImage/EffectImg/Offer-5010-A.jpg" />
</div>
</asp:Content>

اما فرقی نکرد باز هم هر دوتا DIV رو با هم محو کرد و چیزی هم نشون نداد!
با تشکر

[mehdi.mousavi]

سلام.
ببخشید. تو کدی که داده بودم، جای

$('div')

بنویسید

$('#div1')

اولی کلیه div های توی صفحه رو انتخاب میکرد، که خوب، اشتباه بود.
این بار یه مثال عملی درست کردم (http://jsfiddle.net/cf8TS/) که خودتون بتونید ببینید و دنبال کنید.

موفق باشید.

[مهدی رحیم زاده]

ممنون آره تقریبا برام حل شد ، حالا یک سوال دیگه می مونه و اون اینه که آیا راهی داره که این Div دوم بعد از این که DIV اول کاملا محو شد نمایش داده بشه و اینکه کلا موقعیت این div جدید بره جای اون یکی؟
یعنی مثلا یه حالتی مثل اینکه Div اول ما unvisable بشه و div دوم دقیقا جای اون قرار بگیره .
با تشکر

[mehdi_RM]

سلام
باید position رو برای div هاتون absoluteکنید
مثال آقای موسوی رو update کردم ببنید .

http://jsfiddle.net/cf8TS/1/

[مهدی رحیم زاده]

میشه این رو با CSS 2.1 هم برام بگید؟
البته منظورم مثالش بود.
با تشکر

[mehdi.mousavi]

میشه این رو با CSS 2.1 هم برام بگید؟ البته منظورم مثالش بود. با تشکر

سلام.
منظورتون CSS 3 Transition هاست؟ در حال حاضر تو این زمینه Mozilla (https://developer.mozilla.org/en/CSS/CSS_transitions) ساز خودش رو میزنه، مرورگرهای مبتنی بر WebKit (http://webkit.org/blog/138/css-animation/) طور دیگه ای رفتار میکنن و ... بنظرم هنوز وقتش نشده که با CSS Transition ها این Effect رو ایجاد کنیم...

موفق باشید.

[مهدی رحیم زاده]

شرمنده که این همه سوال می پرسم
اگر که ما این رو با همینی که شما نوشتید بنویسیم ، توی نمایشش توی Browser های محتلف دچار اشکال نمیشیم؟

[mehdi.mousavi]

شرمنده که این همه سوال می پرسم اگر که ما این رو با همینی که شما نوشتید بنویسیم ، توی نمایشش توی Browser های محتلف دچار اشکال نمیشیم؟

خیر. مشکلی پیش نخواهد اومد...

[مهدی رحیم زاده]

چطور میشه از این Css 3.0 استفاده کرد؟
من که نتونستم .
با هرچی که کار کردم ، این کد ها رو نشناخت:

filter: alpha(opacity=0);
opacity: 0;
من با VS2010 هم تست کردم باز هم نشناخت
با تشکر

[mehdi.mousavi]

سلام.
بدین شکل عمل کنید:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) ;
opacity: 0

اولی برای IE8، دومی برای IE5-IE7 و سومی هم برای Browser های استاندارد...

موفق باشید.

[مهدی رحیم زاده]

جناب موسوی سلام
میشه همین مثالی رو که گفتید در قالب یک پروژه که با ASP.NET نوشته شده برام بزاریدش؟آخه من هر کار می کنم درست نمیشه!
ممنون میشم
با تشکر

[mehdi.mousavi]

جناب موسوی سلام میشه همین مثالی رو که گفتید در قالب یک پروژه که با ASP.NET نوشته شده برام بزاریدش؟آخه من هر کار می کنم درست نمیشه! ممنون میشم با تشکر

سلام.
متوجه نمیشم، ASP.NET اینجا هیچ نقشی بازی نمیکنه. در واقع شما از این CSS برای HTML خودتون استفاده کنید، باید نتیجه مورد نظر حاصل بشه. خواه اون HTML توسط ASP.NET تولید شده باشه، خواه PHP و Java و ...

ضمن اینکه منم یه پروژه ASP.NET ایجاد کنم، از هیچ، مطلقا هیچ یک از قابلیت های ASP.NET برای تست این مساله استفاده نخواهم کرد (در واقع نیازی به استفاده از اونها نیست) و فقط کافیه CSS مناسب (که حاوی Style فوق هستش) رو به Page مورد نظرم Apply کنم و ...

میتونم خواهش کنم شما Source خودتون رو اینجا قرار بدید تا ببینم ایراد از کجاست؟

موفق باشید.

[مهدی رحیم زاده]

ببینید جناب موسوی
توی mozila درست جواب نمیده ! توی IE هم اولی درست اجرا می شه اما دومی بلافاصله نمایش داده میشه ، یعنی دومی اجرا نمیشه .
ممنون میشم اشکالات کار منو بگید .
راستی توی Browser های دیکه چک نکردم.
با تشکر

[mehdi.mousavi]

ببینید جناب موسوی
توی mozila درست جواب نمیده ! توی IE هم اولی درست اجرا می شه اما دومی بلافاصله نمایش داده میشه ، یعنی دومی اجرا نمیشه .
ممنون میشم اشکالات کار منو بگید .
راستی توی Browser های دیکه چک نکردم.
با تشکر

سلام.
من همین الان کد شما رو دیدم (ببخشید طول کشید).

راستش من متوجه چند نکته شدم، اول اینکه تعریف #div رو بدین شکل انجام بدید فکر میکنم کافیه:


#div1 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) ;
opacity: 0;
}


من راستش اینجا Safari ندارم، اما فکر میکنم opacity رو Safari هم پشتیبانی میکنه.

مساله دوم، که در اصل مشکل به اون برمیگرده، اینه که شما فایلها رو Web-Based آدرس دهی نکرده اید، بلکه اونها رو Disk-Based آدرس دهی کرده اید. به بیان دیگه، جای js/jquery-1.4.2.min.js نوشته اید، js\jquery-1.4.2.min.js و به همین ترتیب pic\1.png و pic\2.png که در همه جا، باید جای \ از / استفاده کنید. این کارو انجام بدید، Element ها طبق نیاز Opacity اشون تغییر میکنه.

موفق باشید.

[مهدی رحیم زاده]

جناب موسوی ممنون
گفته های شما درست بود اما هنوزم توی IE درست عمل نمی کنه!
من از IE8 استفاده می کنم .
دلیل اینو نمیدونید؟
با تشکر

[mehdi.mousavi]

جناب موسوی ممنون
گفته های شما درست بود اما هنوزم توی IE درست عمل نمی کنه!
من از IE8 استفاده می کنم .
دلیل اینو نمیدونید؟
با تشکر

سلام.
من تو IE8 هم آزمایش کردم، مشکلی وجود نداره. این تصویر رو ببینید:


http://barnamenevis.org/forum/attachment.php?attachmentid=56516&stc=1&d=1284672264


CSS مورد نظر داره بدرستی Element مربوطه رو محو میکنه. بعدش هم کد jQuery ای که نوشته اید، div2 رو محو میکنه و div1 ظاهر میشه. البته بازهم تکرار میکنم، CSS ای که نوشته اید رو به چیزی که نوشتم تغییر بدید. چون چیزی که شما نوشته اید اینه:


-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0 )";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) ;
opacity: 0
-khtml-opacity: 0; /* khtml, old safari */
-moz-opacity: 0; /* mozilla, netscape */

و اگر دقت کنید، خط سوم ; نذاشته اید که این باعث بروز خطا در IE و عدم محو شدن div 1 در Firefox میشه.

موفق باشید.

[مهدی رحیم زاده]

جناب موسوی من آخرین کدی رو که دارم رو براتون گذاشتم .
توی IE6 و IE8 هم تست کردم اما دومی رو درست نمایش نمیده و بعد از محو شدن اولی یهو دومی رو نشون میده!
این در حالیه که توی Mozilaو Safari درست عمل میکنه.
ممنون میشم بازم یک نگاهی به کد بندازید.
با تشکر

[mehdi.mousavi]

جناب موسوی من آخرین کدی رو که دارم رو براتون گذاشتم .
توی IE6 و IE8 هم تست کردم اما دومی رو درست نمایش نمیده و بعد از محو شدن اولی یهو دومی رو نشون میده! این در حالیه که توی Mozilaو Safari درست عمل میکنه. ممنون میشم بازم یک نگاهی به کد بندازید. با تشکر

سلام.
کدتون رو دیدم، راستش نمیدونم به چه دلیل این اتفاق میفته اما یه چیزی برام عجیبه! اونم اینکه چرا opacity المنت مورد نظر رو در همون Reader Handler صفر نمی کنید؟ به بیان دیگه، تعریف #div1 رو از توی CSS بطور کلی حذف کنید، سپس Ready Handler خودتون رو اینطور بنویسید:

$(function () {
var $div1 = $('#div1').css('opacity', 0), $div2 = $('#div2');
$div2.animate({ 'opacity': 0 }, 2000, function () {
$div1.animate({ 'opacity': 1 }, 2000);
});
});


اینطوری دیگه در Browser های دیگه هم مجبور نیستید CSS رو دستی اعمال کنید.

[مهدی رحیم زاده]

جناب موسوی کاملا درست بود .
میشه یک منبع خوب البته فارسی برای یادگیری Jquery به من معرفی کنید؟
با تشکر

[mehdi.mousavi]

جناب موسوی کاملا درست بود. میشه یک منبع خوب البته فارسی برای یادگیری Jquery به من معرفی کنید؟ با تشکر

سلام.
حقیقتش من تو هیچ زمینه فنی ای منبع فارسی سراغ ندارم.

موفق باشید.