شکل های متحرک در jquery

[الهام قدوسی]

سلام وقتتون بخیر امیدوارم خوب باشین
من میخوام یه صفحه رو که با css قالبش رو تنظیم کردم به فرم واقعی نزدیک کنم برا شکلهایی که با museover
در jquery تبدیل به یه شکل دیگه میشن و مثلا یه پاراگراف توضیحی هم در کنار تعویض شکل نمایان میشه
چجوری باید این کدش رو <script ..> بنویسم؟!
یه مشکل دیگه هم دارم من یه pdf دارم از jquery فصلش4 روهم خوندم اما زیاد کمکم نمیکنه یعنی اگه امکانش هست بهم یه کتاب معرفی کنید که تا حدودی بتونم مشکلاتمو خودم حل کنم. کلیییییییی ممنون مرسی
الهام:لبخندساده:

[eleboys]

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

در مورد کتاب هم اگر فکر می کنید PDF یا مقالات اینگلیسی کمکتون نمیکنه فکر می کنم تا الان کتاب های فارسی خوبی در این زمینه بیرون اومده باشه؛ از بازار یک نسخه کتاب غیر الکترونیکی فارسی تهیه کنید :)

[sinoser]

jQ متدهای زیادی داره
در ضمضمه jQuery UI روی این بخش متمرکز شده و اکثرا نیاز های گرافیکی رو بر طرف می کنه
البته در موارد مرسوم هم پلاگین زیاده مثلا :
http://www.htmldrive.net/
در مورد کتاب هم باید بگم بهترین کتابی که من توی بازار دیدم جامع و کامه و فارسیو هست کتاب ترجمه ارمان اسد سنگابیه
http://www.kianpub.com/book/292

[الهام قدوسی]

سلام لطف کردین. من الان نمیتونم برم بازار برای خرید تازه اگر هم بتونم برم خوب اهل پول خرج کردن برا کتاب نیستم اگه pdf میشناسین لطفا راهنمایی کنید ادرس بهم بگید خوب در مورد عکس همین جا براتون میذارم 3 تا دایره اخری رو که با mouseover باز میشن نگاه کنید و لطفا راهنمایی کنید چجوری کد رو بنویسم
با css طراحیشو انجام دادم فعلا اما کد jquery رو میخوام

[jalil_gh]

وقتی mouseover میشه باید چه اتفاقی بیافته؟

[الهام قدوسی]

وقتی mouseover میشه شکل عوض میشه یه شکل هم اندازه جای این نشون میده( همون hover image در css )

[jalil_gh]

یه نمونه از کدهای html و css رو بزارید.
تو جی‌کوئری یه متدی هست به نام hover که بهش دوتا تابع میدید. اولی وقتی که moseover شد اجرا میشه و دومی وقتی که mouseout شد اجرا میشه. با اون میشه کاراری زیادی انجام داد.

[sinoser]

فک کنم منظورتون از باز شدن مثلا رنگی شدن همون ایکونه درسته؟
(اگر جواب درست و کاملی می خواهید اصلاحات و بیانتون رو درست برسونید بیشتر افراد یاد دارن اما چون شما بد نوشتین خیال می کنن نمی دونن و ج شما رو نمیدن)

کد برای برداشت خودم:

$('div.cir').hover(function(){
$(this).css('background-image','url(/*url img in mouse over */)');
},function(){
$(this).css('background-image','url(/*url img in mouse out */)');
});

[meisam3322]

فک کنم منظورتون از باز شدن مثلا رنگی شدن همون ایکونه درسته؟
(اگر جواب درست و کاملی می خواهید اصلاحات و بیانتون رو درست برسونید بیشتر افراد یاد دارن اما چون شما بد نوشتین خیال می کنن نمی دونن و ج شما رو نمیدن)

کد برای برداشت خودم:

$('div.cir').hover(function(){
$(this).css('background-image','url(/*url img in mouse over */)');
},function(){
$(this).css('background-image','url(/*url img in mouse out */)');
});


این روش شما برای کسانی که سرعت اینترنت پایینی دارند مناسب نیست. چون باعث میشه وقفه ای جهت لود تصویر ایجاد بشه. ابتدا با css ، تصویر پس زمینه رو برای hover و حالت اولیه اون ایجاد کنید ، بعد با دستورات removeClass و addClass کار کنید.

[sinoser]

این روش شما برای کسانی که سرعت اینترنت پایینی دارند مناسب نیست. چون باعث میشه وقفه ای جهت لود تصویر ایجاد بشه. ابتدا با css ، تصویر پس زمینه رو برای hover و حالت اولیه اون ایجاد کنید ، بعد با دستورات removeClass و addClass کار کنید.

دوست عزیز من وقت طراحی هیچ وقت از این جور متد ها استفاده نمی کنم
ولی مثال گفتم فرد سوال کننده کار دستش بیاد تا بهتر سوال رو برسونه

من خودم برای هیمن مثال چند روش دارم
بدون انیمیشن
1-فقط با css تغییر عکس بک گراند میدیم
2- همون روش 1 ولی به جای تغییر عکس بک گراند پوزیشن عکس بکراند رو تغییر میدم یعنی در واقع 2 حالا در یک عکس لود و استفاده میشه
با انیمیشن
3 - مدل 1 حالت بدون انیمیشن با jQuery
4- مدل 2 حالت بدون انیمیش ولی با css 3
5- مدل 2 حالت بدون انیمیشن با jQuery

و ...

[الهام قدوسی]

ممنون از sinoser عزیز که زحمت کشید و لطف کرد جواب سوال من رو داد ممنون ازتون :*
از جلیل اقا و میثم اقا هم ممنونم کمکم کردین متشکرم :)

[الهام قدوسی]

برای شکل هایی که با (mousover) بزرگ میشن باید چیکار کنم تا بتونم یک عکس رو در 2 سایز بذارم که شکل اول به شکل دوم تغییر سایز بشه وقتی موس روی عکس قرار میگیره؟؟:ناراحت:

[VisualStudio]

برای خیلی از کار ها اگر حالت انیمیشن و افکت رو نمیخواید میتونید از همون Pseudo class ها استفاده کنید
Div{
Background-image:url(…)
}
Div:hover{
Background-image:url(…)
}
برای تغییر سایز عکس اولا باید به صورت ابسولوت باشه

دوما با jquery طول و عرض عکس رو تغییر بدید
اگر به زبون انگلیسی تسلط دارید کتاب های خوبی به صورت PDF دارم

[sinoser]

برای شکل هایی که با (mousover) بزرگ میشن باید چیکار کنم تا بتونم یک عکس رو در 2 سایز بذارم که شکل اول به شکل دوم تغییر سایز بشه وقتی موس روی عکس قرار میگیره؟؟:ناراحت:

این سوال 3 زیر سوال داره کدومش :
1- تغییر بی وقفهه و بزرگ شدن عکس
2- بزرگ شدن عکس با یک زمان مثلا 2 ثانیه
3- تغییر عکس های بزرگ و کوچیک (منظورم اینه که خود محتوای عکس فرق کنه مثلا 2 تا عکس متفاوت باشن)

[الهام قدوسی]

virtualstodio:
من خودم اول با همین کد در css تنظیمش کردم اما چون عکس ها رو وقتی با css برا باز شدن نمیشه سرعت براش تعریف کنی خیلی سریع از عکس کوچیک به بزرگ تبدیل میشد برا همین دارم سعی میکنم با animate در jquery
کد رو بنویسم برا mouseover هم تنظیم کردم فقط الان قسمت mouselaeveرو دارم تنظیم میکنم که مونده هنوز.
خب لطفا برام ادرس لینک رو بدین با تشکر .

[الهام قدوسی]

اقای sinoser
همون شماره 2 اما بجای زمان سرعت تعریف شه براش :)

[sinoser]

اولا از کجا معولمه اقا هستم یا خانوم ؟!
دوما منظور از زمان همون سرعته به میلی ثانیه زمان رو میدن و هرچه این زمان بیشتر باشه سرعت کمتر میشه
اینم کدش
فقطاینا رو بدون
این کد یک عکس با ابعاد 40*40 در حالت کوچک رو به 400*400 تبدیل می کنه در زمان 1000 میلی ثانیه یا همون یک ثانیه
بخونی متوجه میشی

بهترم هست سلکتور عکس ها رو در دایوی مشخص کنی


$('div.imgBox').hover(function(){
$(this).stop().animate({width:400,height:400},1000 );
},function(){
$(this).stop().animate({width:40,height:40},1000);
});

[الهام قدوسی]

من تنظیم کردم اما اگه مثلا چند تا عکس رو به صورت قاب عکس بخوام بذارم کنار هم که باز بشن وقتی که یکی با mouseover باز میشه بقیه عکسها جابجا میشن چون عکس ها بزرگ هست هنگام باز شدن
با استفاده از z-index در کلاس فراخوانی شده نتونستم ثابتش کنم عکسای دیگه رو وقتی یه عکس باز میشه :(

[sinoser]

من تنظیم کردم اما اگه مثلا چند تا عکس رو به صورت قاب عکس بخوام بذارم کنار هم که باز بشن وقتی که یکی با mouseover باز میشه بقیه عکسها جابجا میشن چون عکس ها بزرگ هست هنگام باز شدن
با استفاده از z-index در کلاس فراخوانی شده نتونستم ثابتش کنم عکسای دیگه رو وقتی یه عکس باز میشه :(
از ایده ای که من در پلاگین http://sinoser.ir/plugins/sinoserZoomImgList استفاده کردم استفاده کنید
هنگام mouseover یک کپی از عکس بگیرید بعد عکس اولی رو visibility:hidden کنید توجه display:none نکنید
حالا به عکس کپی شده کلاسی اختصاص بدید با محتوای
position:absolute
حالا با دستورات $(this).position().top و دستور $(this).position().top مقدار فاصله عکس های اولیه رو می گیری و به عکس جدید به عنوان margin-left وmargin-top مقدار میدی تا رو عکس باشه
البته من در پلاگین گفته شده امدم و با متد animate به میزان نصف ارتفاع بزرگ margin-top رو منفی دادم

[الهام قدوسی]

سلام میخوام با استفاده از دستور var withi و var highti بتونم تنظیماتی رو برای عکسام بذارم مثل تنظیم اندازه عکسم جدا از animate که وقتی عکس ها باز شد بعدش بسته شد در اندازه قبل از باز شدنش قرار بگیره اخ تعداد عکسام زیاد هست کنار هم هستن الان تا وقتی موس روی عکسا میره تنظیم هست وقتی هم موس روشون هست باز میشن تنظیم هست اما هنگامی که کامل کوچیک شد عکس ها به یه اندازه خاص همه عکسام برمیگرده که با قبل از باز شدن فرق داره ؟؟؟؟؟؟؟؟؟؟؟؟؟؟!!!!!!!! لطفا کمکم کنید.

[Javidhb]

باید کدتون رو بزارید....

ببینید این بدردتون میخوره: http://jsfiddle.net/D8yYP/

[sinoser]

سلام میخوام با استفاده از دستور var withi و var highti بتونم تنظیماتی رو برای عکسام بذارم مثل تنظیم اندازه عکسم جدا از animate که وقتی عکس ها باز شد بعدش بسته شد در اندازه قبل از باز شدنش قرار بگیره اخ تعداد عکسام زیاد هست کنار هم هستن الان تا وقتی موس روی عکسا میره تنظیم هست وقتی هم موس روشون هست باز میشن تنظیم هست اما هنگامی که کامل کوچیک شد عکس ها به یه اندازه خاص همه عکسام برمیگرده که با قبل از باز شدن فرق داره ؟؟؟؟؟؟؟؟؟؟؟؟؟؟!!!!!!!! لطفا کمکم کنید.

شما باید همون اندازه عکسی که در حالت کلی (نمای کوچیک) در css گذاشتی براشون اینجا هم موقع کوچیک کردن با متد animate همون مقدار رو بذار تا یکی بشن
اما این که می گی همه عکسام نشون میده تو همه عکس ها رو سلکت می کنی و باید به سلکتور this تنظیمات رو بدی (در تابع اکشن)

بازم کدتو بذار بهتر راهنمایی کنیم

[الهام قدوسی]

اینم از کدش دقیق ببینید تو دستور jquery اونایی رو که // سبز کردم باید با استفاده از اونا بتونم بعد از باز شدن عکس وقتی میخواد اندازش کوچیک شه به اندازه اولیشی برگرده یعنی من اگه تو دستور pic 1 براش margin-top=20px,margin=left 10px با اندازه های width:80 ,height 100رو دادم و pic2 با یه سری اطلاعات متفاوت تا مثلا pic20 هنگامی که باز میشن برا بسته شدن همشون اونجوری که من تعریف کردم mouseover و height=50,width=50یه اندازه و جاهای مختلف از قبل از باز شدنشون قرار نگیرند ؟؟؟؟؟!!!! حالا چیکار کنم
منظور کلی من این هست قبل و بعد از باز شدن عکس ها اندازه و جاشون تغیر نکنه اگه الان موقعیت xرو داره با size s بعد از باز شدن هم همین باشه.

[الهام قدوسی]

من با انیمیت کد رو نوشتم و اینی رو که شما گفتین انجام دادم اما برا قاب عکسایی که من مد نظر دارم خوب نشد یعنی ایراد داشت کلا :D<br>&nbsp;
باید کدتون رو بزارید....<br><br>ببینید این بدردتون میخوره: http://jsfiddle.net/D8yYP/<br> <br>

[sinoser]

شما میری با یک متغییر سراسر مثلا مقدار پارامتر هاشو می خونی بعد توی اکشن mouselevel میای و اونا رو به عنوان اندازه های اخری میدی
اما اینو فراموش کردی که این ها متغییرن یعنی با رفتن موس از روی یک عکس به عکس بعدی مقدار داخلی این متغییر ها عوض میشه و در نتیجه عکس که بازه به حالت کوچیک عکسی که در حال باز شدن میره

شما برای حل این مشکل باید مقداری صفت ها رو (همونایی که // کردی) رو با پارامتر this توی اکشن mouselevel بخونی و به متد animate بدی

[الهام قدوسی]

لطفا کد رو برام بذار:لبخند:

[sinoser]

خب سورس کد رو می ذاشتی تغییراتو روش انجام میدادم بت می دادم

[الهام قدوسی]

من هرکار میکنم اینجا نمیتونم کد بنویسم همش راست چین میشه کدهام بهم میریزه عکسشو که گذاشتم :)وردش رو گذاشتم تو ایمیلتون لطفا چک کنید.

[sinoser]

خب راس چین بشه
بعدشم کد ها بعد از این که مطلب درج شد برای دیگران درس نشون داده میشه خودتم می خوای درست نشون داده بشه یک رفرش بعدش بزن