fadeIn background image on click - javascript

I have a working code that changes my document background image when links in my navbar are clicked. The background image changes instantly with no animation. How could I make the new background image fadeIn(); ?
js
$('.navigation a').click(function() {
currentBg = $(this).attr('href').replace('#', '') +'.jpg';
$('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

I don't believe you can, the only way (that I know of) would be to have a block element (div for example) which has the background and that appears behind the rest of your content (positioned absolutely) and fade that in instead of switching backgrounds.

You cannot animate the background image changing its opacity.
May be you can have a image with required opacity at different sections and then animate the background position so that it gives a fadeIn behavior.
Take a look at this link it will help you.

There is no possiblity to fade the background image, you have to create a container and set its background image to let it fade in and fade out.

I've done something like this before by floating a foreground image on a separate div on top of the background image you'd like to 'fade' in and then creating a jquery fade-out effect on the foreground image.
You can use a similar trick to set solid text on a semi-transparent "background".
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

I agree with int0x90.
What you can do is this:
Stack your images in a div, style position absolute, style of each image position absolute
set an id for the div
add a class active, with a z-index of 10
set all inactive images in div z-index to 0
you can use the z-index to pull the image with the highest z-index to the top of the stack
add class active to the on-click of nav bar link and remove this class from the previous on click so that the image's z-index is set back to 0 and not overridden.
in jquery, you may now be able to use opacity change and the speed of the change
hope this helps get you started!

As many others already said, it's impossible unless you use a block element as background.
But if you only want an animation, you could have a .gif as background then when it's animation has finished replace it with the real Image so the .gif doesn't iterate itself

Related

How to add a transition effect to an image when changing its SRC with Javascript?

I want to add a transition effect to an image tag when changing its SRC. I have the following:
let bverse = document.getElementById('bible-verse');
setTimeout(function(){
bverse.src="../images/bverses/verse2.jpg";
}, 5000);
I have managed to add a transition effect to the background image with:
JavaScript:
let slider = document.getElementById('hero-slider');
setTimeout(function(){
slider.style.backgroundImage="url(../images/hero/slider-2.jpg)";
}, 5000);
CSS:
.hero-bg {
background-image: url(../images/hero/slider-0.jpg);
transition: background-image 2s;
}
But I dont' seem to get the same effect when adding the same styles to the CSS of the bible-verse class. How can I add a transition effect to the bible-verse img tag, without the need of a div container?
Transition property won't work with properties like background-image
Here you have the list oof animatable css properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
But you could do some workaround here by animating image with #keyframes animations. It depends on what effect you would like to achieve. But I have one example. If you would like to create an animation of image sliding, you could create two images, one would be hidden under the visible image, and via #keyframes you could just move the first visible behind the container it is in and then delete it, when it is offscreen. It would have to been done with combining JavaScript (to add a class that animates an image, delete image, etc) and CSS (to animate an image).

CSS Sprites with jquery

I would like to control a css sprite with javascript/jquery. Based on a user input the image should move position.
The case: I have an image container with 400x400, but the image I want to show is 400x1200, so I can only display 400 in height at the time, but the width would be constant.
I would to like to display parts of the image when a user clicks a button. I have drawn an example to show what I want: http://0o2471.net/55070
In that mockup you have the image container which is 400x400 marked with black frame, the green background is the "image" that I want to display based on the user input. So let's say the user press the "Button bottom" then the bottom part would change its position to the center(image container.)
Any suggestions on how I do this? Which functions in jquery/javascript should I use? Is css sprites the best way? I don't need the whole code, just a few directions.
Use background-position CSS rule. JQuery code for this
$(element).css({'background-position' : '0 -100px'})

jQuery Transitions?

I want to use jquery to access a hover state on a li element. Before hovering on it, it is gray. When you hover on it, it becomes red and underlined. You could do this in css, but the trick is that I want it to transition from the left of the li to the right so it appears to be sliding color in.
If you're talking about animating the underlining of the li:
Create a thin (2px tall, width of the li) red div that contains a thin (same size) white div inside of it. You should only be able to see the white, covering the red div completely.
Make sure the red div has overflow:hidden as a css property. Then do a jQuery animate to move the white div to the right, creating the illusion of a red line slowly underlining the li. When someone mouses over any li, find the closest "red/white" nested divs and perform the animate on the white div. Kinda like this:
$("li").hover(function(){
$(this).next('div').children('div').animate({left: (width of div)px});
});
The next('div') finds the red div, then the children('div') finds the white div inside of it. The animate function moves the white div out of the way, exposing the red div.
Did you tried this example:
http://www.incg.nl/blog/2008/hover-block-jquery/
Or this with lavalamp plugin:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
It is better to have a background image which of the required color in the li dimension. So that you can make an animation effect when the mouseover and mouseout events the li. On mouse over animate the background image from background-position of some '-' to 0 and on mouse out do the reverse.

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

jquery animate opacity has an impact of other divs? weird behavior

I've got a really strange jquery behavior. I want to make a grid like background with animated tiles (opacity to .8 and back to .25 on mouseover and mouseleave).
As this should be my background it should'n have an impact on my content div.
Unfortunately it doesn't work as expected. THe content div(Which i colored red for testing purposes) gets animated, too.
Here's a link the the site.
Part of the problem could be that, when you mouseover the background tiles, the event is bubbling up to the content div. You could try doing this somewhere in your event listeners:
e.stopPropagation();
I'm adjusting your code to use the .hover() event instead of juggling mouseover/mouseout, also I'm using fadeTo instead of manually animating opacity.
$(document).ready(function() {
$('#page-bg ul li img.keyword').hover(function(){
$(this).fadeTo('slow',0.8);
},
function() {
$(this).fadeTo('slow',0.25);
});
...
});
The content div is not animated, but the page-bg div is on the top of the content (because of absolute position), so when you change opacity, the content div (in the background) is getting visible...

Categories