سلام

من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و ۲ دلیل بیشتر نداره!

اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت jQuery.com آخرین ورژن این کتابخانه ی فوق العاده رو دانلود کنید و باز هم لازم نیست که بگم باید این فایل js رو در صفحه وبتون باید وارد کنید(که همه ی اینها در دموی انتهای مطلب انجام شده و به راحتی میتونید تقلب کنید!)

ما میخواهیم یک کار ساده اما زیبا کنیم و اون اینه که یک عکس رو تبدیل کنیم به یک عکس دیگه (با حرکت اشاره گر موس به روی تصویر) برای این کار میتونیم از css و خاصیت background و با استفاده از یک hover ساده انجام بدیم اما ما میخواهیم که این تبدیل به صورت آرام و به قول اجنبی ها fade و animated باشه! خوب همونطور که گفتم اول جی کوئری رو وارد میکنیم:

 

<script type=’text/javascript’ src=’http://yoursite.com/jquery.js’></script>

 

توی این کد فرض شده که فایل جی کوئری در پوشه ی اصلی سایت آپلود شده مثل تمام زمان هایی که میخواهیم از جی کوئری استفاده کنیم باید یک یا چند تابع هم داشته باشیم:

<script>

$(document).ready(function(){

    $("img.a").hover( function() {

         $(this).stop().animate({"opacity": "0"}, "slow");

         }, function() {

         $(this).stop().animate({"opacity": "1"}, "slow");

    });

});

</script>

و استایل (سی اس اس) هم:

 

<style>

   div.fadehover { position: relative; }

   img.a { position: absolute; left: 0; top: 0; z-index: 10; } 

   img.b { position: absolute; left: 0; top: 0; }

</style>

 

و این هم کد اصلی صفحه ( کد html )

 

<div class=”fadehover”>

      <img src=”cbavota-bw.jpg” alt=”” class=”a” />

      <img src=”cbavota.jpg” alt=”” class=”b” />

</div>

 

توضیحات واضحات!

یک سری توضیحات کوچیک اما کلیدی میدم بقیش رو خودتون بفهمین دیگه!

در کد اول (تابع جی کوئری) به خط سوم دقت کنید:

 

$(“img.a”).hover()

 

ما اینجا تگ img رو که class اون a هست هدف قرار دادیم  و opacity هم شفافیت هست که عددی بین ۰ و ۱ میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!

استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)

در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن

برای دریافت دمو روی لینک زیر کلیک کنید

jQuery fade effect demo

منبع،تقریبن!:bavotasan.com

درباره این نویسنده

مطالب مشابه

23 Responses to یک افکت ساده و زیبای جی کوئری برای تصاویر

  1. علي ناطقي گفت:

    از حموم اومدی بیرون؟!
    آخه موهات داره میره بالا!!!

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۱۶ام, ۱۳۸۸ ۵:۴۱ ب.ظ:

    بابا فشنه مثلن!

    [پاسخ]

    amir پاسخ در تاريخ آذر ۱۸ام, ۱۳۹۰ ۱۲:۳۳ ق.ظ:

    مثلن
    تقریبن
    واقعن
    نمره املات تو دبستان چند بود؟
    اینا چیه نوشتی ؟
    درستش ایناست پسرم یاد بگیر :
    مثلا
    تقریبا
    واقعا
    یکی هزار بار از روشون بنویس تا یاد بگیر. بازم بود البته دیگه نگفتم :دی

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آذر ۱۸ام, ۱۳۹۰ ۱:۱۰ ب.ظ:

    اینجوری بهتره به نظرم، وبلاگ هم مال خودمه کسی نمیتونه غلط املایی بگیره ازم، هرکاری بخوام میکنم:))

  2. علي ناطقي گفت:

    حالا این هیچی، اما در مورد «فشن» باید بگم برات که این فشن حاصل کار بهره‌کشایی هست که یکی از صفاتشون این کلمست: «خشن»!

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۱۹ام, ۱۳۸۸ ۱۲:۳۲ ب.ظ:

    یابد اعتراف کنم تقریبن نصف حرفهای شما رو نصفه میفهمم، یا اگرم بفهمم شک میکنم که منظوره شما بوده باشه! :دی

    [پاسخ]

  3. ن ک گفت:

    راستی نمی دونم چرا ورد پرس ورژن نیو که این جا گذاشتین دان لود نمی شود!؟
    اگه از سایت انگلیش ِ ورد پرس دانلودش کنم فرقی نمی کنه؟
    آخه اون خیلی سریع دانلود شد، متعجب شدم که متفاوت بوده باشه

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۳ام, ۱۳۸۸ ۱۲:۱۱ ق.ظ:

    شما برین سایت wordpress.org فارسیش هست میتونین از سایت wp-persian هم دریافت کنین آخرین ورژن رو

    [پاسخ]

  4. علي ناطقي گفت:

    سیاوش دنبال animal farm هستی؟! «قلعه حیوانات خودمون دیگه؟! «جورج اورول»؟
    یا اینکه کتاب دیگه‌ای هست؟

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۰ام, ۱۳۸۸ ۴:۲۷ ب.ظ:

    بله این همون قلعه حیوانات خودتونه! و من انگلیسیش رو گرفتم اما صفحه ی اول رو که خوندم پشیمون شدم! الان فارسیش رو باید بخرم، یا شایدم الان ای بوکشو دانلود کنم :دی آره الان دانلودش میکنم!!

    [پاسخ]

    علي ناطقي پاسخ در تاريخ آذر ۲۷ام, ۱۳۸۸ ۸:۲۴ ب.ظ:

    فوق العادست!
    البته بعد ممکن بخاطر جریان‌های بعد از انتخابات یک مقدار در تحلیلش به خطا بری اما بازهم ایراد نداره.
    بعدش حتما «۱۹۸۴» جورج اورول رو هم بخون.

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۷ام, ۱۳۸۸ ۸:۳۲ ب.ظ:

    چشم حتمن! این یکم سخته چون دارم تو یه صفحه ی ۳ اینچی میخونمش، امیدوارم این یکی نسخه ی کاغذیش گیرم بیاد :دی

  5. علي ناطقي گفت:

    برای خرید کتاب برو اینجا
    http://www.adinebook.com/gp/search/707-2029062-5361550?search-alias=books&field-keywords=%D9%82%D9%84%D8%B9%D9%87+%D8%AD%D9%8A%D9%88%D8%A7%D9%86%D8%A7%D8%AA&Go.x=0&Go.y=0&Go=Go
    فقط یادت باشه ترجمه امیرشاهی رو بگیری

    برای خرید کارتونش برو اینجا
    http://shop.iranget.com/?p=105

    برای دانلودش هم برو اینجا
    http://www.4shared.com/file/27613366/928b622f/_737_.html

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۹ام, ۱۳۸۸ ۱۲:۰۰ ق.ظ:

    خیلی ممنون، واقعن بعضی وقتها که نا امید میشم از این وبلاگ و به بیهوده بودنش فکر میکنم یاد شما و دوستان دیگه میافتم و دوباره جون میگیرم! یه دنیا ممنون، خیلی ارزش داره برام اینکه برام وقت گذاشتین و زحمت کشیدین، ممنون علی جان، موفق باشی

    [پاسخ]

    علي ناطقي پاسخ در تاريخ آذر ۲۹ام, ۱۳۸۸ ۱۲:۳۵ ق.ظ:

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

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۹ام, ۱۳۸۸ ۱:۱۳ ق.ظ:

    خواهش میکنم، وظیفه بود، باعث خوشحالیمه، خیلی ممنون شرمنده کردین :x

  6. علي ناطقي گفت:

    نظرمو وردپرس خورد!(؟!)

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۸ام, ۱۳۸۸ ۱۱:۵۴ ب.ظ:

    اتفاقن الان دارم دنبالش میگردم! دو بار خوندمش اما الان زدم رو جفنگ (روم به دیوار!!) بعد تو لیست جفنگها هم نیست :)) شما از کجا فهمیدی؟:دی

    [پاسخ]

    سياوش کشميري پاسخ در تاريخ آذر ۲۸ام, ۱۳۸۸ ۱۱:۵۸ ب.ظ:

    پیدا شد :دی

    [پاسخ]

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>