Develop Reference

fadeOut() function with setInterval

I'm trying to create a transition effect between images without success.
I'm using this code that works fine, unfortunately the images change without any effect.
var images = [
"https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
"https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
"https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]
var imageHead = document.getElementById("image-head");
var i = 0;
setInterval(function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
}, 1000);
https://jsfiddle.net/vvwcfkfr/1/
I've try thousand of solution this week with fadeIn, fadeOut, without any success.
I'm looking to create a transition effect like the slider on the Ryanair's homepage.
Any suggestion? Thanks.

You can use something like transition: background-image 0.3s; in CSS to achieve fade between images, but they have to be the same size. Otherwise there will be also resizing animation.

how about jquery fade in fade out. https://jsfiddle.net/vvwcfkfr/121/
setInterval(function() {
$('#image-head').fadeOut("slow",
function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
$('#image-head').fadeIn("slow")
}
);
}, 2000);

Improve image slider animation

How can i improve image slider transition. It is rather erratic. I want it to be smooth (smooth in and out properly). The problem is image only fadeIn, i cannot figure out how to fadeOut.
var nextimage = 0;
var timer = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")')
.fadeIn(3000, function() {
timer = setTimeout(doSlideshow, 3000);
});
}
$(".col-md-8").hover(function() {
clearTimeout(timer);
});
$(".col-md-8").mouseout(function() {
setTimeout(doSlideshow, 3000);
});
Pen

setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 400
Check this link also.

I have fixed this for you, you do not need settimeout for this kind of stuff, there are many other ways.
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")');
$('.col-md-8').hide().fadeIn(3000).fadeOut(2000, function() {
doSlideshow()
});
}
Link to codepen, there is bit more to say about this, which I will do later.
http://codepen.io/damianocel/pen/PzQwNr

jQuery site does not show image after some time

I am using jQuery and this code:
$(window).load(function()
{
var i =0;
var j =0;
var images = ['img/TopSlider/car_and_cycle.jpg', 'img/TopSlider/cafe.jpg'];
var image = $('#box');
var titles = ['Rent Car and Bikes', 'Cafes and Restaurants'];
//Initial Background image setup
image.css('background-image', 'url(img/TopSlider/cafe.jpg)');
//Change image at regular intervals
setInterval(function()
{
image.fadeOut(1000, function ()
{
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
$("#text2").text(titles [j++]);
});
if(i == images.length)
{
i = 0;
j = 0;
}
}, 5000);
});
but after some time (maybe 10 min), when I go back to the tab in Safri, I don't see the background image. But at start and maybe during 1 min it works perfect.

Background image won't change

I want to change div's background image inside setInvterval, but can't figure out how. Here's the code:
$('.thumbnail').on({
'mouseenter': function(){
var thumbs = $(this).attr('data-num-thumbs');
var thumb_url = $(this).css('background-image');
console.log(thumb_url);
var i = 1;
setInterval(function(){
var new_thumb_url = thumb_url.replace(/\d{1,2}\.jpg/gi, i + '.jpg');
console.log(new_thumb_url);
$(this).css('background-image', new_thumb_url);
i++;
if(i > 10) i = 1;
}, 3000);
});
});
This is how div looks like:
<div data-num-thumbs="17" class="thumbnail" style="background: url('http://site/img/11.jpg') no-repeat;"></div>

It looks like $(this) inside setInterval() is mapping to something else , try this
$('.thumbnail').on({
'mouseenter': function(){
$this=$(this); //store $(this) in a local var
var thumbs = $(this).attr('data-num-thumbs');
var thumb_url = $(this).css('background-image');
console.log(thumb_url);
var i = 1;
setInterval(function(){
var new_thumb_url = thumb_url.replace(/\d{1,2}\.jpg/gi, i + '.jpg');
console.log(new_thumb_url);
//$(this).css('background-image', new_thumb_url);
$this.css('background-image', new_thumb_url);
i++;
if(i > 10) i = 1;
}, 3000);
}
});
Happy Coding:)

8 image change on mouse hover and return to default when left

i have an 8 img elements in my page -
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
On hover it should change from 1_1 to 1_2 till 1_8 and then 1_1 again. On mouse out it should show the default pic i.e 1_1. Like this i have 2_1, 3_1 till 8_1.
The javascript function for mousehover is -
function mousehover(x){
for(var i=2; i<9; i++){
x.src = x.src.replace('images/rotator/1_' + i + '.jpg');
}
}
function defaultImg(x){
x.src = x.src.replace("images/rotator/1_1.jpg");
}
Somehow this mouse hover func does not work. And how do i get the defaultImg for all the images on mouse out. I am stuck here. Any ideas?

Try the following.Should work:
var timer;
var i=2;
function mousehover(x){
x.src = 'images/rotator/1_' + i + '.jpg';
i++;
timer = setTimeout(function(){mousehover(x)},2000);
}
function defaultImg(x){
i=2;
clearTimeout(timer);
x.src = "images/rotator/1_1.jpg";
}

You can pass the first number as parameter in the function calls.
<img onmouseover="mousehover(this, 1)" onmouseout="defaultImg(this, 1)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this, 2)" onmouseout="defaultImg(this, 2)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
And the JavaScript would be:
var interval;
function mousehover(x, y) {
var i = 1;
interval = setInterval(function() {
i++;
if (i > 8) {
clearInterval(interval);
i = 1;
}
x.src = 'images/rotator/' + y + '_' + i + '.jpg';
}, 500);
}
function defaultImg(x, y) {
clearInterval(interval);
x.src = 'images/rotator/' + y + '_1.jpg';
}
For more performance, I would combine all images into one big sprite, and play with the background-position instead of loading a new image each time.

Something in these lines should work:
var element = document.querySelector("#switch");
element.addEventListener('mouseover', function() {
this.src = "http://placehold.it/400x300";
});
element.addEventListener('mouseout', function() {
this.src = "http://placehold.it/200x300";
});
Fiddle

You need something like this:
//TIP: Insert listeners with javascript, NOT html
x.addEventListener('mouseover', function () {
var count = 1,
that = this,
timer;
timer = setInterval(function () {
if (count < 8) {
count++;
} else {
count = 1;
}
that.src = 'images/rotator/1_' + count + '.jpg';
}, 500);
function onMouseOut() {
that.src = 'images/rotator/1_1.jpg';
that.removeEventListener('mouseout', onMouseOut)
}
this.addEventListener('mouseout', onMouseOut);
});