سلام

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

اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت 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 (2187 دانلود ها)

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

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

مطالب مشابه

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

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

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

  2. ن ک گفت:

    سلام من دوست دارم یاد بگیرم دارم از اول شروع می کنم
    شاید تا وقتی که کامل، به قولی قشنگ، در حد ِ بنز! یاد بگیرم نیاز به کمک پیدا کنم:D
    خیلی خوبه آموزش ها
    ۲۰

  3. ن ک گفت:

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

  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

    • سياوش کشميري گفت:

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

      • علي ناطقي گفت:

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

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

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