I'm trying to animate a overlay using opacity when you hover the element, however it does not work. I can easily do it without the animation, but I would like to get a fade effect. I'm trying to achieve this with jQuery.
I want the overlay to not be visible when the image is hovered.
Take look at below jsfiddle-example:
http://jsfiddle.net/jem2M/1/
I've been looking for examples, but most of them use fadeIn and fadeOut, and I can't use that because the element should always be visible, only the opacity should change on hover.
Solved:
Forgot to enclose the selector. Working example:
http://jsfiddle.net/jem2M/4/
$('.bghover #background img') - you forgot (twice) to enclose your selector into quotes.
example fiddle : http://jsfiddle.net/jem2M/4/
I've just opened http://jsfiddle.net/jem2M/4/ (using my chrome 21) and it works fine. When you mouse over the image it animates the opacity to 1 , and when the mouse goes out the opacity is modified to 0.75
Related
I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help
skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations
Simply added a class on hover, and removed the class on mouse off.
Very simply, I'm trying to fade in the background-image of a div; I've seen this done with two divs and effectively revealing (i.e.: faux fading in) the background-image by fading out the background-color of a div covering the background-image. This will not solve my problem.
The above mentioned solution works if the "mask" is the same solid color as the body background-color. In my case, the body's background is a textured image, so this will not work. I could set the "mask" div to have the same background-image as the body, but having a z-indexed div seems like overkill.
tl;dr I have a div somewhere in the body--how do I fade in its background-image? Thanks!
You need two divs. The first one has no background color and the second one has a background image. Fade the second one (Asherlc proposed a way) and you're done.
.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...
<div>
<div class=toFade style="background-image:url(img.png)">
<!-- possible content -->
</div>
</div>
Not possible as far as I know. You will need 2 images / elements to do this. You could use jquery / jquery ui's toggleClass with a duration.
See examples here:
How to add a fadeIn effect while changing background image using .css in Jquery
jQuery li with image fade in background (fade in class)
Ok!
It took me some time to solve this kind of "Challenge" and I think I came up with an idea close to your request!
Despite the fact that you want to FadeIn only your background-image with only one div I made a jQuery script using
clone() method.
The only thing that has a little work to do is if you want to fade In some text as well!
Take a look of my script and let me know if it helped!
http://jsfiddle.net/7z8vB/
I have this page:
http://beta.amitai-clinic.com/
If you hover the top left logo, it should 'fade' the same logo with some text underneath it.
Problem is, the logo part is being faded in naturally, but the text beneath it looks like it's being placed in all together, and not faded in 'naturally'.
Any ideas?
From what I saw, your text is written over the image, having a different background on mouseover and I think the problems are caused by that
You could try instead to do something like this:
<div class="sublogo-stress" style=" ">
<img src="/wp-content/themes/SimplePress/images/trans_120x90.png">
<span>test</span>
</div>
You could even set the opacity of span to 0 to make it completely invisible.
The fade effect should work better now.
toggleClass changes opacity to match the opacity of the hover class and than adds the class. but, anyway, the point where you change the class will behave as a sudden appearance of the text. Look here http://jsfiddle.net/eYJym/
You can 'bypass' this effect by fading to 0 where the class should be toggled. Or by placing the invisible layer with the text above the original image, fade it to some opacity and then hide the layer with the original image. It will be much easier to deal with images without transparency :)
i have a div in which i have a button linked to a javascript function that will toggle a textarea. When the button is clicked the div size instantly changes. I tried adding transition effects to the div but there is no smooth change in size (height to be more specific).
My question is: is there any way in wich i can make the div to be resized smoothly?
use .animate() - http://api.jquery.com/animate/
If you can provide some code i'd be happy to explain this in greater detail.
I've coded a quick example for you - http://jsfiddle.net/ajthomascouk/eaBgT/
Don't just a height transition, use a scaley transform from 0 to 1. This should be smoother.
I got a div with some text and a link tag in it, when i click on the link i would like to have an overlay over the div so the opacity is set to .3 or something and have a little form put over it. Does anyone know how to approach this in jquery?
You can use my elementOverlay plugin:
var overlay = $('#yourDiv').elementOverlay();
// some code
overlay.elementOverlay('hide');
Plugin code: https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js
Just make a div of a fixed size, width and position (the same and place as the original) and set It's background color to slightly transparent.