Been hitting my head a while with this one.
I'm a total novice in JavaScript and jQuery.
After a lot of trial and error I eventually managed to write a function to change the src attribute of an image to create a slideshow as such:
$(function () {
var slideshow = $("#img_slideshow");
var images = [
'img/slideshow1.jpg',
'img/slideshow2.jpg',
'img/slideshow3.jpg'];
var current = 0;
function nextSlide() {
slideshow.attr(
'src',
images[current = ++current % images.length]);
setTimeout(nextSlide, 5000);
}
setTimeout(nextSlide, 5000);
});
This works perfectly, changes the image every 5 seconds. What I wanted, was a fade transition between them. I tried calling .fadeIn and .fadeOut in several places I find logic, such as next to setTimeout (probably wrong) but nothing will work.
Can anyone help? And I'd be grateful to have a simple explanation of where it should be called, could help a lot of folks out there. Thanks.
It should be done like this (using the callbacks) -
function nextSlide() {
slideshow.fadeOut(function() {
$(this).attr('src',images[current = ++current % images.length]).fadeIn();
});
setTimeout(nextSlide, 5000);
}
This insures that the source is not changed until the fade out is complete. The source changes and the fade in then happens. This will not be a cross-fade though.
Related
I'm using JS to make a simple function that displays 3 items one at a time. Works well when you're looking at the page, but when you minimize or change tabs then return, all three items are shown.
Anyone know why? It's as if fadeIn(x) keeps running but hide() stops working. I even checked with different classes.
Here is the code:
$(document).ready(function () {
function start() {
$(".featured-items").hide();
$( ".item-1" ).fadeIn('slow');
setTimeout(one, 5000);
}
function one() {
$(".featured-items").hide();
$( ".item-2" ).fadeIn('slow');
setTimeout(two, 5000);
}
function two() {
$(".featured-items").hide();
$( ".item-0" ).fadeIn('slow');
setTimeout(start, 5000);
}
setTimeout(start, 5000);
});
Problem solved, check the best answer below and make sure to read comments to get a good understanding. Thanks to all
(Updated to provide complete answer)
Your original code is too complex, and a more flexible and simpler implementation is to have just one function, and an array of items in the gallery. Secondly, you should modify your code so the fadeIn animation starts immediately instead of getting queued. Having only one function instead of several makes alterations such as this easier.
Note that in the code below, as in your original code, the various gallery items are classes rather than single element ids and could fade in multiple items.
var gallery = [ '.item-1', '.item-2', '.item-3' ];
var i = 0;
function galleryEvent() {
$(".featured-items").hide();
$( gallery[i] ).fadeIn({duration: 'slow', queue: false});
i = (i + 1) % gallery.length;
setTimeout(galleryEvent, 5000);
}
// start everything off....
galleryEvent();
My question is pretty simple(i think, but i cant find any reference, who wants to slow down their site,right?) and may sound ridiculous, but what I am trying to do is to have a splash screen on page load of the Home/Index of my site.
What I did is at the top of my page, I just added a simple div for my splash and use javascript to hide it when the page is loaded.
$(window).bind("load", function () {
// Remove splash screen after load
$('.splash').css('display', 'none')
})
but my problem is, my home index loads too fast (because its just plain text/html) hence the splash screen shows like .5 sec only. I want to add atleast 2-3 secs before it is removed, Im assuming I just need to add a line or two of code in my $(window).bind to pause for a couple of secs before doing $('.splash').css('display', 'none') but I dont know what or how to do it, please help! Thank you!
You can use setTimeout() to delay things in Javascript, like this:
$(window).bind("load", function () {
var delay = 5000;
setTimeout(function () {
$('.splash').css('display', 'none');
}, delay);
});
Timeout works.
$(window).bind("load", function () {
// Remove splash screen after load and 3 seconds
setTimeout(function() {
$('.splash').css('display', 'none')
}, 3000);
});
I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.
I have built a really simple image fading gallery sorta thing, which works on firefox (and I'm sure worked on chrome before the holidays). However now Chrome just fades out the first image and never applies the .first class so subsequent animation is skipped.
JS
function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property").addClass('first').fadeIn(1500);
$(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);
JSFiddle: http://jsfiddle.net/pkyAS/1/
under each "property" div you have a div with "opacity:inherit" remove the "opacity:inherit" and it should work. let me know if there are more problems.
Here is my solution on fiddle.
I removed your interval, and made the "doRotator" run once - it was easier for me to debug
By the way - fadeIn(1500) is on your interval time.
If your interval is for 3000 millis, and you have fadeIn(1500) - then the div will be visible for 1.5 sec.
Consider triggering "setTimeout(doRotator,3000)" with 3000 when the fadeOut finishes.
EDIT : how to force removal of "opacity:inherit" - you can simply append some JS code to force that.
function doRotator(time){
$('.rotator3 .property.first').fadeOut(1500, function(){
$('.rotator3 .property.first').removeClass('first').next(".property")
.addClass('first').fadeIn(1500).find("div:first").css("opacity",null); $(this).appendTo('.rotator3'); });
}
setInterval(function () { doRotator(3000);}, 3000);
I'm required to develop a slideshow (not an existing one) with jQuery. I was able to change picture with a function that I created named changePic (takes an image link). It incorporates the fading animation from the jQuery library.
For the slideshow I'm trying to use a while loop. It kind of works, except that it doesn't wait for the animation to finish.
How do I, a) wait for the animation to finish, b) delay the changing picture so it display the picture for a couple of seconds?
Also tried Settimeout, and it doesn't work.
Edit:
Basically changing image is like this:
function changePic(imglink){
var imgnode = document.getElementById("galleryimg");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", imglink);
$(imgnode).fadeTo(1000, 1);
})
}
and the slideshow code is like this, but obviously it shouldn't.
function slideshow(gallerylinks){
var i=0;
while (i<gallerylinks.length){
changePic(gallerylinks[i]);
i++;
}
}
You could always try ditching the while loop, and going with a perpetually recursive function...
on the .animate, you could add a timeout function (at whatever interval) that calls the changePic function. As I have no idea what your code looks like, I will provide a fantastically generic outline.
/* array of imgUrls */
var imgUrls = new Array(); //populate it however
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay)
{
$('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){
$('#slideHolder').attr('src', imgUrls[slideToShowIndex]);
$('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() {
setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay});
});
}});
}
$(document).ready(function() {
changePic(0, 5000, 5000, 10000);
});
This should (in theory) fade the image out, swap it with the new one, and fade it in (both taking 5 seconds) and then adding a delay to call itself with the next slide index in 10 seconds.
This is in no way perfect, but does outline the general idea. Since we have no idea what your code looks like, I can only assume your setTimeout was in the wrong spot. Doing it like this will make sure that the animation has finished before the timeout is set. This guarantees that the slide wont change until after the animation has changed.
of course you could always use a combination of the ':not(:animated)' selector and a setInterval to achieve much the same effect.
EDIT: made a slight change to stack the animations properly. The thoery behind this still works even with the OPs addition of code.
You could have provided more details or example code but have a look at stop() and delay() functions.