I am trying to make my fadeing in/out more smoother than it currently is here > JSFIDDLECurrently it is very sharp (as in it seems to fade the first image out first before the second even begins) when fading images.The JS:$(document).ready(function() { $('#thumbImgs').hoverscroll({ fixedArrows: true, vertical : true, width: 250, height: 600, arrows: false, rtl: true, thespeed: 30 });});$("#thumbImgs li").live('click', function(e) { var largeImgURL = $(this).attr('id'); $('#bigPic').fadeOut('fast'); $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">');});The HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>HoverScroll Test Page</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js"></script> </head><body> <h1>HoverScroll Test Page</h1> <div id="theThumbs"> <ul id="thumbImgs"> <li id="img1.jpg"><img src="http://www.zzzz.com/test/img1_tmb.jpg" width="120" height="120" alt=""></li> <li id="img2.jpg"><img src="http://www.zzzz.com/test/img2_tmb.jpg" width="120" height="120" alt=""></li> <li id="img3.jpg"><img src="http://www.zzzz.com/test/img3_tmb.jpg" width="120" height="120" alt=""></li> <li id="img4.jpg"><img src="http://www.zzzz.com/test/img4_tmb.jpg" width="120" height="120" alt=""></li> <li id="img5.jpg"><img src="http://www.zzzz.com/test/img5_tmb.jpg" width="120" height="120" alt=""></li> </ul> </div> <div id="bigPic"> <img src="http://www.zzzz.com/test/img1.jpg" width="1000" height="700" alt=""> </div><script type="text/javascript"> $(document).ready(function() { $('#thumbImgs').hoverscroll({ fixedArrows: true, vertical : true, width: 250, height: 600, arrows: false, rtl: true, thespeed: 30 }); }); $("#thumbImgs li").live('click', function(e) { var largeImgURL = $(this).attr('id'); $('#bigPic').fadeOut('fast'); $('#bigPic').fadeIn('slow').html('<img src="http://www.zzzz.com/test/' + largeImgURL + '" width="1000" height="700" alt="">'); });</script></body></html>Any help would be great! Thanks!
jQuery crossfade 2 images with thumbnail click
- Thread starter phreak
- Start date