اموزش jQuery و کار با تصاویر در طراحی وب

تاریخ : ۱۳۹۳/۶/۱۱ بازدید : ۶۹۳

اموزش jQuery و کار با تصاویر در طراحی وب

در این آموزش قصد ایجاد یک اسلاید را داریم.یک عکس را به وسیله نرم افزار دریمویور باز کنید و در بالای آن دو متن بنویسید،یکی با نام SlideUp و دیگری با نام SlideDown و به هرکدام از آنها آی دی جداگانه اختصاص دهید.دقت داشته باشید که هر کدام از انها(عکس ها و متن) درون تگ p باشد و به تگ ها آی دی اختصاص دهید.به صورت زیر:

116 300x60 آموزش جی کوئری قسمت پنجم:کار با تصاویر

حال کار جی کوئری را آغاز می کنیم.کار ما به این نحو است که اگر بر روی SlideDown کلیک شد عکس بسته شود و اگر بر روی SlideUp کلیک شد عکس باز شود.

شروع کار:

	$(document).ready(function(){
		$("#slide-up").click(function(){
			$("#pic").slideUp();});
		$("#slide-down").click(function(){
			$("#pic").slideDown();});});

حال می تواینم به جای کد slideUp یا SlideDown عکس خود را Fade کنیم،به صورت زیر:

	$(document).ready(function(){
		$("#slide-up").click(function(){
			$("#pic").fadeIn(500);});
		$("#slide-down").click(function(){
			$("#pic").fadeOut(500);});});

نکته:درون پرانتز می تواینم مدت زمان انجام کار را بنویسیم که من در بالا نیم ثانیه عمل fade شدن را انجام دادم.

لینک های مرتبط

کلمات کلیدی : اموزش نرم افزار فوتوشاپ فلش طراحی وب برنامه نویسی انیمیشن مرحله به مرحله تصویری

سوالات و نظرات خود را با ما درمیان بگذارید

سوالات کاربران

نسخه قابل چاپ


نام *

ایمیل *

پیام شما *
سوال امنیتی	جمع اعداد 3 و 7

ورود به سایت

ورود به سایت

آخرین مطالب

اموزش jQuery و کار با تصاویر در طراحی وب

سوالات و نظرات خود را با ما درمیان بگذارید

سوالات کاربران