رفتن به مطلب

اضافه کردن افکت fade به اسلایدر


پست های پیشنهاد شده

سلام دوستان ...

یه اسلایدر دارم که یک فایل جاوا داره، حرکت فعلیش از راست به چپ هستش، میخواستم افکتش رو بکنم fade.

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


$(document).ready(function() {
//Display paging
$(".paging").show();
$(".paging a:first").addClass("active");

var imageWidth = $(".viewer").width();
var imageSum = $(".slideimages img").size();
var imageSlideWidth = imageWidth * imageSum;

$(".slideimages").css({'width' : imageSlideWidth});

//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var slideimagesPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
//Slider Animation
$(".slideimages").animate({
left: -slideimagesPosition
}, 500 );
};

////Rotation and Time
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) { //When the end is reached
$active = $('.paging a:first');
}
rotate();
}, 4000); // 4 seconds
};
rotateSwitch();

////Click
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});

////Hover
$(".slideimages a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

});

لینک به ارسال

سلام.

فکر کنم این:


//Slider Animation
$(".slideimages").animate({
left: -slideimagesPosition
}, 500 );

باید بشه این:


//Slider Animation
$(".slideimages").fadeOut(5000);

اون 5000 هم زمان برحسب میلی ثانیه هست.

لینک به ارسال

افکت fade رو انجام میده، ولی کلاً دیگه عکسهای بعدی کار نمیکنن و ظاهر نمیشن، با این کد فقط عکس اول زمانی که میخواد محو بشه افکت fade رو میگیره.

چه میشه کرد؟

لینک به ارسال

یه بار به جای 5000 بزنید 500 شاید کل زمان اسلایدرو میگیره.

یه بار هم به جای fadeOut بزنید


$(".slideimages").toggle(500);

در غیر اینصورت م شرمنده ام که وقت شما رو گرفتم.

لینک به ارسال

نه متاسفانه دوست عزیز ... نشد !!! شما لطف هم کردید که وقت گذاشتید برای تاپیک.

ولی مشکل اینه که عکسها رو پشت سر هم ردیف میکنه و با اون افکت جلو عقبشون میکنه، که فکر میکنم تو اون کدهای پیوست واضح باشه، البته من سر رشته ای از جی کوئری ندارم.

ولی بازم ممنون از شما.

دوستان کسی میتونه راهنمایی کنه ؟

لینک به ارسال

دوستان عزیز مجدد سلام ...

یکی از دوستان افکت fade رو انجام داد و درست کار میکنه، منتهی یه مشکلی داره اینه که تو فایل js یه سری کدها هستش که زمان اجرای اسلایدر، عرش اسلایدر برابر میشه با جمع طول تمامی عکسها، یعنی حدود 2520px و همین مشکل ساز شده برای ریسپانسیو شدن.

من اسلایدر رو انلاین براتون اماده کردم، ممنون میشم راهنمایی بفرمایید.

https://jsfiddle.net/gncc95hy/

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...