I have about 50 Images that should be shown one after another inside a div.
The delay between showing one image then another is about 750 milliseconds and decreasing with each image.
I made sure that all images are loaded before this animation kicks in, by using:
(window).load(function() { });
The animaton is done using setTimeout
var index = 1;
function newImage(index) {
var interval = setTimeout( function(){
$("#image-container .image").css("display","none");
$("#image-container .image:nth-child("+index+")").css("display","block");
clearTimeout(interval);
index = index + 1;
newImage(index);
},delay[index-1]);
}
Where delay is an array of delays, something like [750,750,650,...].
The animation works fine, but there's a visual delay as fast as a blink of an eye, where no image is shown and only the background is visible, how can I avoid it?
try to use visibility css property instead of display
Related
I cant seem to get this slide show to work with javascript. the image fades in and out correctly on the first image but when transitioning for the second image it seems to immediately skip to the image instead of transition like the previous.
<script type="text/javascript">
var images = ["image1.png", "image2.png", "image3.jpg"];
var imagecount = 0;
window.setInterval(setImage,5000);
function setImage(){
$('.bgimage').fadeIn(5000);
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeOut(5000);
imagecount++;
if(imagecount > 2){
imagecount=0;
}
}
</script>
Without seeing the html structure or a fiddle, it's hard to trouble-shoot with any accuracy. I'm guessing the issue is probably with your fadeIn and fadeOut calls, as they are currently set to animate for a full 5 seconds each, and animating at the same time as one another (They are called asynchronously). Instead, you should adjust the fadeIn method to execute after the fadeOut finishes using the built-in jQuery callback. Like so:
$('.bgimage').fadeOut(500, function() {
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeIn(500);
});
I've also switched the order of your fade calls, as you should fade out the image, then update it (while it's not visible), then fade it back in. Your interval should still work the way you want, running every 5 seconds. Now the transitions won't take a full 5 seconds to animate.
Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)
Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel
I would like to change an image in my site with fading effect. The thing is that I am using two different classes for the same div, so actually I want to fade out one class and in the meanwhile start fading in the second class, before the first one has been completely removed.
HTML:
<div id="background_image" class="day"></div>
CSS:
.day{
background: url(day.png);
}
.night {
background: url(night.png);
}
JQuery:
setTimeout(function(){
if($("#background_image").hasClass("day")){
$("#background_image").fadeOut(function() {
$(this).removeClass("day");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("night");
});
}else{
$("#background_image").fadeOut(function() {
$(this).removeClass("night");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("day");
});
}
}, 5000);
But this code makes the image "day.png" first to disappear completely and then the "night.png" comes which is not what I want.
Is there a way to fade out the class "day" and start fade it "night" without having a blank space between the fading? Thanks in advance
It seems that what you're trying to do is cross-fading. This is normally done using 2 divs. If this is for the entire background, then I suggest http://srobbin.com/jquery-plugins/backstretch/. You can take a look at their implementation to narrow it down to just a div if you don't need it to cover the entire background.
This is how I solved it for a similar case.
var images = [
"/content/images/crane1.jpg",
"/content/images/crane2.jpg",
"/content/images/crane-interior.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(images[index], { speed: 500 });
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
EDIT:
For non-full background, take a look at this post Crossfade Background images using jQuery
Also take a look at this, might be closer to your scenario Cross fade background-image with jQuery
I am trying to create a very simple slideshow.
I would like the slideshow to pause on hover and resume when the user moves their mouse off the slideshow (#slide_container). While the slideshow works fine, and so does the hover (to an extent), if I flick my mouse on and off the slideshow repeatedly, it completely messes the slide and starts animating sporadically (check the fiddle below to see what I mean).
I tried adding promise, so that before animating it completes any queued animation, but despite this, the behaviour remains.
How should I go about fixing this?
Here is the fiddle: http://jsfiddle.net/hR6wZ/
my js code:
$(document).ready(function() {
//get variables
var slide_width = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;
//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);
var i = 0;
var hover_switch = 0;
$('.slider_container').hover(function() {
//Hover mode on
hover_switch = 1;
}, function() {
//Hover mode off
hover_switch = 0;
sliderLoop()
});
function animateSlider() {
$(":animated").promise().done(function() {
$('.slider').finish().animate({ marginLeft: -(slide_width * i) });
});
}
function sliderLoop() {
setTimeout(function(){
//Only runs if hover mode is off;
if(i < number_of_slides-1 && !hover_switch) {
i++;
animateSlider();
sliderLoop();
}
else if (!hover_switch)
{
i = 0;
animateSlider();
sliderLoop()
}
},4000);
}
sliderLoop();
});
EDIT: also I did try using stop instead of finish() but this didn't fix the issue..
Becuase your calling the slider loop each time you hover out everytime even if you hover back and forth like ten times it tells it and queus it up to animate the x amount of times you did that.
What you can try is Only have the slider loop check right then and their when it's about to animate if it is being hovered or not and don't call the slider loop from the every time that it hovers out.
Another way is right before it begins animating set a variable for the duration of the animation to tell it not to call the animateSlider function if Currently_animating
so add && !currently_animating to each if statement within the sliderloop function.
That method however will help but probably the first way would be better as then it will never animate more then every x miliseconds or however long you set it to be.
But in General you probably should not call the sliderloop function if hover_switch = 0 becuase then it will just queue up the slider loop each time you hover out.
the following code which is called periodically by setInterval performs the following sequence:
1. fade in an image for 750 msec
2. diplay it for 6 secs
3. fade out the image for 750 msec
4. randomly select another image (function randomPic)
5. fade in for 750 msec and so on:
$("#_fadee_").fadeIn(750, function() {
$("#_fadee_").delay(6000).fadeOut(750, randomPic);
});
You can see the effect here. How can I get the fadeOut of the old image and the fadeIn of the new one to run simultaneously?
Thanks, Ralf
Basically, you need to load the new image in another div that has a z-index beneath the image fading out. It's not that it's fading in simultaneously, it's just uncovered as the initial is fading out. Once the top div is faded out completely, you load the mew image into it and return its opacity to 1 so that it covers the div that you will load the next image into. In pseudocode it would look something like this:
var fadeO = function () {
var $fo = $('#_fadeO_');
var $fi = $('#_fadeI_');
var newImg = // load image here;
$fi.html(newImg);
$fo.fadeOut(1500, function() {
// put #_fadeO_ back on top with new image
$fo.html(newImg);
$fo.css({'display':'block', 'opacity':1});
// call function again after 6 seconds
setTimeout(fadeO, 6000);
});
};
fadeO();
...but I made a fiddle of it so you could see it in action, switching background colors instead of image contents. You should be able to get the idea of how to do the same with loaded images based on the above pseudo-code and how the HTML, CSS, and JS is set up here:
http://jsfiddle.net/UbmS9/
If you aren't doing anything else you could do this:
$("#_fadee_").fadeIn(750, function() {
setTimeout(function() {
$("#_fadee_").fadeOut(750, randomPic);
// Start fading in your other pic
}, 6000);
});
Alternatively, if they're both being displayed in the same area, you could fade in, and once faded in set the background image to the next image. Then, once that's faded out, set the background to the next, and so on.