We Keep Coding

jQuery background image change on timer

I have a div:
<div class="coverImage" style="background-image:url('3.2.5\\assets\\img\\backgroundCanvas1.jpg');"></div>
and an attached jQuery script to rotate its background every 20 seconds
var coverChange =
{
init: function()
{
var itemInterval = 20000;
var numberOfItems = 4;
var currentItem = 1;
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
//loop through the items
var infiniteLoop = setInterval(function(){
$('.coverImage').attr("style", "background-image:url()");
if(currentItem == numberOfItems -1){
currentItem = 1;
}else{
currentItem++;
}
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
}, itemInterval);
}
};
coverChange.init();
When the image changes it happens to white out the bottom half until I scroll slightly. My main ask is help with a fadeIn of the new image. (everything else is secondary)
I have experimented using the jQuery fadeIn property but cannot get it to work in a seamless aesthetically pleasing way.
I am not looking for code elegance only function, as you can tell :-)
P.S Loading the image initially via CSS did not work.

You should be able to add a simple CSS transition to your coverImage element.
.coverImage {
transition: background 1s;
}
I've created a working example at https://jsfiddle.net/mark_c/pa44n42k/1/

For a fade in out effect, you should simply fade out the div before this step:
$('.coverImage').attr("style", "background-image:url()");
and fade it in after this step:
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
For fade in out you can use simple jquery as I suppose you already have but not the right way, so good luck.
This will give you a nice fade in/out effect. :)

Fade my background change

I have to change a div bg each 5 seconds.
But I really want to make this transition as a fade effect..
I'm doing this (but I get an abrupt transition instead of a fade one...):
<script>
var bgArr = ["images/1.jpg", "images/2.jpg", "images/3.jpg" ];
var i=0;
var interval = self.setInterval("changeBg()", 5000)
function changeBg() {
if (i>(bgArr.length-1) ) {
i=0
$("#header").css("background-image", "url("+bgArr[i]+")");
}
else {
$("#header").css("background-image", "url("+bgArr[i]+")");
}
i++;
};
</script>
How can I do this transition as a fade... without showing a white space (I mean.. The second image appears slowly over the first one)??
I'm really stuck.. :(

You can try the bgshuffle script. It uses JqueryUI. You will have to include JqueryUI somewhere in your page. The script is posted on github, feel free to extend it if you like:
https://github.com/vikaskumarsingh123/bgshuffle/
You can simply call it like:
shuffleBG( ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'] );//the array of wallpapers
or Advanced Usage:
shuffleBG(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'], //the array of wallpapers
'10000', //time between wallpaper change, defaults to 10000ms (10secs)
'1000', //fade in fade out animation speed, defaults to 1000ms
'white' //color to fade in and out of, defaults to body backgroundColor or white
);
You will usually be calling this function on document.load and it will start changing the background image fade-in-out every 10 seconds.

How about using .fadeTo():
DEMO: https://jsfiddle.net/w13bhcgt/
$(function () {
var bgArr = ['http://png-5.findicons.com/files/icons/1243/hello_kitty/256/flower.png',
'http://www.vectorimages.org/01/01201101251549265911.png',
'http://media.janm.org/exhibitions/hellokitty/JANM-HelloKitty-icon-bow.png'];
var i = 0;
function Change() {
$("#header")
.fadeTo('slow', 1)
.css("background-image", "url(" + bgArr[i] + ")")
.fadeTo('slow', 0);
i++;
if (i < bgArr.length) setTimeout(Change, 2000);
}
Change(0);
});

Equivalent of #keyframes for jQuery

I'm looking for a way to emulate the CSS #keyframes animations using jQuery.
I need to change the background image each x seconds following a list of images provided when the user moves mouse over an element.
The CSS animations should be:
.readon:hover {
animation: readonin 2s;
}
#keyframes readonin {
0% { background-image: url(1.png); }
50% { background-image: url(2.png); }
100% { background-image: url(3.png); }
}
I've found plugins like Spritely but they works with sprites and I need instead to change the image background of the element.
Use the set-interval function of Javascript seems a bad solution because I can't find a way to stop the animation when the user moves the mouse out of the element.

Use something like...
var images = ["1.png", "2.png", "3.png"];
var $element = $(".readon");
var interval = null;
$element.hover(function () {
var $this = $(this);
var i = 0;
var fn = function () {
$this.css("background-image", "url(" + images[i] + ")");
i = ++i % images.length;
};
interval = setInterval(fn, 666);
fn();
},
function () {
clearInterval(interval);
$(this).css("background-image", "none");
});
jsFiddle of a similar concept (with background colours).
It should be clear enough to see what's going on. Basically we start looping over the images and setting them as the background image on mouse over, and reset it when the mouse leaves.

You can use a library like jQuery-Keyframes
to generate new keyframes at runtime if that is what you are after.

Issue with jquery fadein

I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body,
If you think what the issue i'm having please let me know thanks
<script type="text/javascript">
$(window).load(function() {
var lastSlide = "";
$('#slider').nivoSlider({
effect: 'random',
directionNavHide : true,
slices : 15,
animSpeed : 500,
pauseTime : 6000,
controlNav : false,
pauseOnHover : true,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){
if(lastSlide == "images/header_used.jpg") { //use the bg image of the slide that comes before the newslide
$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
} else {
$("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
}
},
afterChange: function() {
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src");
}
});
});
</script>

While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.
I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)

It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src"); //could store multiple source.
This make comparation a little bit tricker and could create bug.
Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).
Hope this help

fadein and fadeout work for body,absolutely.
as Reflective said, it should be
$("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow")
if still doesn't work, you may should look into your nivoSlider function

How to combine jQuery animate with css3 properties without using css transitions?

In this example; i am trying to create a jQuery animation with css3 rotate property. I can manage this animation with css3 transition and jQuery css() but i want to do this with jQuery animate() for rotating deg value according to my jQuery variatons.
Is it possible use animate with css3 property value with jQuery 1.8.0?
Here is jsFiddle to inspect.
jQuery:
var rotateVal = 90;
//this method isn't working
$('.red').animate({
'transform':'rotate('+rotateVal+'deg)'
},500);
//this way works but i don't want to do this with transitions
$('.black').css({
'transform':'rotate('+rotateVal+'deg)',
'transition':'1s'
});​
html:
<span class="black"></span>
<span class="red"></span>
Edit: Vendor prefixes removed, like -webkit-. Thanks to Kevin B.

It is possible, but it isn't easy.
var red = $(".red"),
rotateVal = 90;
$("<div />").animate({
height: rotateVal
},{
duration: 500,
step: function(now){
red.css('transform','rotate('+now+'deg)');
}
});
This basically creates a fake animation of a detached div, then on each step, updates the rotation of the target div.
Edit: Oops! wrong argument order. Here's a demo. http://jsfiddle.net/qZRdZ/
note that in 1.8.0 i don't think you need to specify all the vendor prefixes.
Using this method, you can animate almost anything as long as you keep in mind that things like += and -= won't work properly unless coded for.
Update: Here's a combination of my solution and cuzzea's solution abstracted behind a function. http://jsfiddle.net/qZRdZ/206/
$.fn.rotate = function(start, end, duration) {
console.log(this);
var _this = this;
var fakeDiv = $("<div />");
_this.promise().done(function(){
_this.animate({"a":end},{duration:duration});
fakeDiv.css("height", start).animate({
height: end
}, {
duration: duration,
step: function(now) {
_this.css("transform", "rotate(" + now + "deg)");
},
complete: function() {
fakeDiv.remove();
}
});
});
return _this;
};
var red = $('.red');
red.click(function() {
if ( !$(this).is(':animated') ) {
red.rotate(45,135,500);
setTimeout(function(){
red.rotate(135,190,500);
},750);
setTimeout(function(){
red.rotate(190,45,500);
},1500);
}
});
});

Kevin is corect, almost. :)
Here is working jsFiddle.
You don't have to use another element and height, you can do something like:
var red = $('.red'),
max_rot = 45,
start_from = 90;
red.css({a:0}).animate(
{'a':1},
{ step: function(value,tweenEvent)
{
rotateVal = start_from + max_rot * value;
red.css({
'transform':'rotate('+rotateVal+'deg)',
});
}
},
1000);​
The ideea is simple. First we create a bogus css property 'a' and set it to 0, and then we animate it to 1, so the step function will give you a value of 0 to 1 that you can use to set the custom transform.

An alternative method would be to use jQuery to change the dom to something that css would respond to.
We can set our css to look like this:
.object {
-webkit-transition:all .4s;
-moz-transform:all .4s;
-o-transform:all .4s;
-ms-transform:all .4s;
transform:all .4s;
}
.object[data-rotate="false"] {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
.object[data-rotate="true"] {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Our jQuery would look like this:
$('#trigger').live('click',function(){
if($('.object').attr('data-rotate') = true) {
$('.object').attr('data-rotate',false);
}
else {
$('.object').attr('data-rotate', true);
}
});
Obviously, the browser has to support the ability to transform whatever animation you want to run, so its its hit or miss depending on the type of animation, but its nicer to work with if you have a ton of stuff going on or you have some children you want to animate concurrently.
Example fiddle:
http://jsfiddle.net/ddhboy/9DHDy/1/