We Keep Coding

the 'animate()' function my code doesn't work but 'css()' does. what's wrong?

this piece of code works only when i write
.css()
, but not
.animate()
What is the reason?
the whole thing:
$(window).on("scroll", function () {
$('.banner').animate({'background':'linear-gradient(to right, black 50%, white 50%'}, 800);
$('.banner h1').animate({
'background': 'linear-gradient(to left, black 50%, white 50%', '-webkit-background-clip': 'text', '-webkit-text-fill-color': 'transparent'
}, 800)

From the documentation:
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
What you're trying to animate doesn't fit the description of what it says it can animate.

Image zoom JS (with background image, not img)

I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?

The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.

Animated effect in multiple images

This is my scenario,
I am having 4 images on top of my webpage, named img1,img2,img3,img4.
Now I am also having 4 images on my bottom my webpage named fly1,fly2,fly3,fly4
Now, I have a button in my screen named, 'Done'. When I click it, Images shown on bottom should fly and fix over the images shown on top, as shown order below,
fly1 fly and fix over img3
fly2 fly and fix over img1
fly3 fly and fix over img4
fly4 fly and fix over img2
For your better understanding I ve placed my code in jsffiddle, please make a note of it.
http://jsfiddle.net/premkumar_ks16/a09bshb7/29/
I can't achieve, Anyhow I tried
Please guide me
Regards,
Arun

As per the js fiddle link you shared, the only change required in your code is adding a position: absolute property to the css of the flying image
$("#fly1").css({
"top": v.top + "px",
"left": v.left + "px",
"position": "absolute",
});
Here's a working fiddle.
Without absolute position, html elements have a default static position value, because of which the elements render in order as appeared in the document flow

This will give you a better start
http://jsfiddle.net/KaTNH/1589/
$(document).ready(function() {
$("#b").animate({top: "+=500"}, 2000);
$("#b").animate({top: "-=300"}, 1000);
});
jQuery to animate image from left to right?

Keep gradient the same when changing background image with javascript

I have a background image that I want to change every 10 seconds. However, I have a gradient on top of that image, that I dont want to change when i change the image. This is the original css:
#carBanner
{
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('TS12-COVER.jpg');
}
Then I have javascript that has a function that is called every 10 seconds, the function looks like this:
function changeImage()
{
document.getElementById('carBanner').style.background = "url('haegri.png')";
}
When i do this, the gradient no longer appears on top of the picture.. I have also tried this:
function changeImage()
{
document.getElementById('carBanner').style.background = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('haegri.png');"
}
But then the image wont change.
Can anyone please tell me how i can change the background image and still keep the gradient? Thanks in advance!

Use CSS classes to control this behavior, you can add or remove class from your element in javascript. You CSS class can have your settings of background and gradient.

Using style.background will affect all properties of background. However if you specifically want to target backgroundImage please use below mentioned code.
function changeImage()
{
document.getElementById('carBanner').style.backgroundImage = "url('haegri.png')";
}
Update:
Since this method does not seem to work, I am posting this fiddle on lines as mentioned by kush. This method seems to work as long as you just want to swap between 2 images.
It basically uses 2 classes with two different background images. On click instead of changing just image, previous class gets removed and new class is applied.
http://jsfiddle.net/gtej2/
I will still looking for more elegant solution and will update fiddle soon.

For the image use:
background-image
Or in your code:
.style.backgroundImage ...

What about using an overlay? You place a div on which you are setting the image and another div over it on which you set your gradient.
Therefore you would have to set correctly your overlay, but with JS it's quite easy:
$(document).ready(function () {
// Set the overlay over the image slider
var left = $("#test").offset().left;
var top = $("#test").offset().top;
$("#overlay").css('left', left + 'px');
$("#overlay").css('top', top + 'px');
// Change your image
setInterval(changeImage,1000);
});
This would look like this: http://jsfiddle.net/QtBlueWaffle/Tj7j5/1/

Div width expand/shrink on click

For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.
http://djsbydesign.com/tempsite/index.htm
At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.
The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.

The following seems to work:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
});
Albeit I'm not sure how you'd plan to bring back the the 'other' div.
JS Fiddle demo.
Edited to add a button (via jQuery) that allows both divs to be reverted to original dimensions:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited to address the question left by OP in the comments:
is there a way to have a page redirect after the animation completes?
Yep, just add the line window.location.href = "http://path.to.url.com/";
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited in response to bug report (in comments):
The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.
To prevent a second button being added to the div just add an if:
$('#left-bg, #right-bg').click(
function(){
if (!$('.show').length) {
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
}
});
Which, will only append a button, or indeed animate the divs, so long as the $('.show') selector returns no matches.
However if you're also redirecting to another page by clicking the button it shouldn't be an issue anyway, since none of the jQuery on the original page will exectute/be able to access the page to which the user is redirected (unless it's a page on your own domain, and you've explicitly chosen to add the same button).

If you give absolute positions to your div's such that - 1st is positioned at top left corner and other is positioned at top right corner. And then in click event you can change the position of the other top corner of the div to be expanded.
You can use jquery to do this easily. Check jquery documentation for setting css.

Looks like you've got jQuery included, so use that! It's totes the easiest library to do simple animations with.
Here's an example click function that will slide the right background to be 100% like you said:
$('a#link').click(function(e) {
e.preventDefault();
$('#left-bg').animate({ width : '0%' }, 'slow');
$('#right-bg').animate({ width : '100%' }, 'slow');
});
Obviously to go in the other direction you'd switch the width values in the object passed to the animate functions.
If you're not familiar with the animate function, check the docs, but basically you just pass CSS rules in a key : value object to it, and it'll change the CSS values over time - animating it!
Hope this helps!