/    Sign up×
Community /Pin to ProfileBookmark

How can I change the animation in this slider.js

I have been asked to change the animation in this slider.js from a sliding effect to a fading effect. I have no idea how to do this ? Please help. The code is listed below and also listed [URL=”http://codeviewer.org/view/code:220f”]here[/URL]. Thanks!

$(document).ready(function() {
//Show the paging and activate its first link
$(“.paging”).show();
$(“.paging a:first”).addClass(“active”);

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(“.window”).width();
var imageSum = $(“.image_reel img”).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size

$(“.image_reel”).css({‘width’ : imageReelWidth});

//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr(“rel”) – 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(“.paging a”).removeClass(‘active’); //Remove all active class
$active.addClass(‘active’); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(“.image_reel”).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer – this will repeat itself every 7 seconds
$active = $(‘.paging a.active’).next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end…
$active = $(‘.paging a:first’); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(“.image_reel a”).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});

//On Click
$(“.paging a”).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@3NexJan 18.2012 — Instead of the animate method, you will use the fadeOut method and you will remove the first argument, because obviously a fadeout effect doesn't need a destination position.

So your part of code that looks like this:
[CODE]//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
[/CODE]


Should look like this:
[CODE]//Slider Animation
$(".image_reel").fadeOut( 500 );
[/CODE]
Copy linkTweet thisAlerts:
@Machaut1973authorJan 19.2012 — Thanks 3Nex for helping me to understand that I don't need to animate. I made the changes and the first image fades but subsequent images don't appear. An example of what is happening can be seen here. The updated .js file can be found here.
Copy linkTweet thisAlerts:
@3NexJan 19.2012 — Yea yea true true. Here's the updated (whole script for you to just copy paste over your current script). This is not the very best way to do this, but it is a way that will work with your current HTML with no problem, so you don't need to change any of it.

[CODE]$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

var sliderImages = new Array();
$(".image_reel > a").each(function(){
sliderImages.push($(this).find('img').attr('src'));
});

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").fadeOut(500, function(){
$(".image_reel > a:first-child > img").attr("src", sliderImages[triggerID]);
$(".image_reel").fadeIn(500);
});

};

//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
});
});[/CODE]
×

Success!

Help @Machaut1973 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...