hi guys
i have a slider which have a scroll left transition but i want to turn that into a fadeIn and fadeOut transition but i couldn't
i copied the script.js context but jquery-1.9.1.min.js as you know you're could use CDN
if someone could help me with this i'll be so grateful
cheers
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/script.js"></script>
<title>SlideShow 2 - www.CGTV.ir</title>
<meta name="" content="">
</head>
<body>
<div id="container">
<div id="slideshow">
<ul>
<li>
<h4>آموزش Parallax Scrolling (پیمایش منطبق) در طراحی وب</h4>
<p>بسیاری از شما بازی Angry Birds رو بازی کرده‌اید ، و حتما متوجه شدید در مراحل اجزا با فاصله های مختلف از شما قرار دارند. اما میدانیم که این بازی یک بازی دو بعدی بوده و عمق تصویری وجود ندارد....</p>
<img src="images/img0.jpg" />
</li>
<li>
<h4>آموزش طراحی اسلایدشو با جی کوئری</h4>
<p>سرانجام فرصتی پیش اومد تا دوباره وب سایت رو آپدیت کنم و این آپدیت رو مدیون دوست عزیزم “حامد حامدی” هستم که این آموزش فوق العاده رو آماده کرده. در این آموزش شما از پایه آموزش ساخت یک اسلایدشو بر پایه جی کوئری رو فراخواهید گرفت. نکته ای که باید در نظر داشته باشید اینه که در این آموزش حامد عزیز فقط بروی قسمت کدهای جی کوئری این اسلایدشو تمرکز کرده پس نباید انتظار داشته...</p>
<img src="images/img1.jpg" />
</li>
<li>
<h4>CGTV در جشنواره وب ایران</h4>
<p>سلام دوستان امسال هم مثل سال گذشته وبسایت CGTV کاندیدای بهترین وبسایت در بخش آموزشی شده. امیدوارم که با حمایت های شما عزیزان امسال هم به مانند سال گذشته مقام برگزیده توسط بازدیدکننده رو دریافت کنیم. به همین منظور برای حمایت از وبسایت خودتون روی لینک زیر کلیک کنین و رای خودتون رو ثبت کنین....</p>
<img src="images/img2.jpg" />
</li>
<li>
<h4>معرفی وب سایتهای فعال در زمینه آموزش وب</h4>
<p>در این پست قصد دارم وب سایتهای فارسی زبان رو که در زمینه آموزش تصویری فعال هستند رو به دوستان عزیزم معرفی کنم. به هر حال این وب سایتها هم همانند سی جی تی وی رسالت آموزش از راه دور را دارند و به همین دلیل تصمیم گرفتم یک پست رو به معرفی این وب سایتها که از دوستان من هستند و زحمت میکشند محتوا تولید میکنند رو به شما معرفی کنم تا...</p>
<img src="images/img3.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
/*********** this is the Jquery code *************/
$(function(){
var i = 0;
var slides = $('#slideshow li');
var sWidth = 769 * slides.length;
$('#slideshow ul').css('width',sWidth);
$('#slideshow li').css('float','left');
$('#slideshow ul').css('overflow-y','hidden');
$('#slideshow').css('overflow-x','hidden');
$('#slideshow').scrollLeft(0);
$('#slideshow').after('<div id="navigator"></div>');
$('#navigator').append('<ul></ul>');
for(j=0;j<slides.length;j++)
$('#navigator ul').append('<li></li>');
var navs = $('#navigator li');
navs.eq(0).css('background-color','white');
function intfunc(){
if(i>=3)
i = -1;
i++;
$('#slideshow').animate({scrollLeft: i*750},500);
navs.eq(i).css('background-color','white');
navs.eq(i-1).css('background-color','#a0a0a0');
}
var interval = setInterval(intfunc,3000);
navs.click(function(){
i= navs.index(this);
$('#slideshow').animate({scrollLeft: i*750},500);
clearInterval(interval);
interval = setInterval(intfunc,3000);
navs.css('background-color','#a0a0a0');
navs.eq(i).css('background-color','white');
});
});
Submit an article or tip