My script:
$(window).load(function(){
$(".inner").hover( function (e) {
$(this).find(".info").stop().fadeIn(410);
}, function() {
$(this).find(".info").stop().fadeOut(410);
});
});
When I mouseover the div .inner it will play the animation but when I quickly mouse out and mous in again it will stop on the place where I mouse out it, to make it easier.
http://www.sakesalverda.nl/projects/ and hover on a website image and quickly mouse out and hover the image of the website again and you will see it will not fully make the animation
There surely is a jQuery solution, but I would use CSS for this, it's much easier and im most cases the performance is better:
.inner .info {
opacity: 0;
-webkit-transition: opacity .42s;
transition: opacity .4s;
}
.inner:hover .info {
opacity: 1;
}
Works on all major browsers, but IE8 would need a fallback. One downside is, that IE8 and IE9 won't have the fading effect, but in my opinion, thats a death we can afford to die, as those browsers are at only 5% these days. And the showing / hiding will work, just not as nicely as with modern browsers.
Related
My goal is to show an image and bring it slowly to the foreground (and extend it in the main time). I wish this can be done when I detect the event onmouseover on a div/img.
Currently, I use the hidden attribute but I dislike it because it's like: appear/vanish, without transitions.
I hope there were a solution with a CSS/CSS3 attribute which will do that. But I found none. I try something with the animate. but it hardly failed.
Do somebody know how to do such of thinqs? I'm using basic html/css/js but I can use bootstrap (if it has a good solution).
Thanks.
You can achieve this with CSS transition and transform. You could use the scale function. Here's something you can play around to get what you want:
http://jsfiddle.net/v2kHU/1/
img{
transition: all 1s;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
}
Edit:
If you want it to be hidden at the beginning then fade in and scale, you could play with the opacity:
http://jsfiddle.net/v2kHU/2/
img{
transition: all 2s;
opacity:0;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
opacity:1;
}
I've added a fullscreen overlay navigation to my little blog, and I've used this code: http://tympanus.net/Development/FullscreenOverlayStyles/index.html
As you can see, the transition is very smooth, especially when you close the overlay. But on my site the closing animation stops abruptly: (click on the icon next to the logo)
http://blog.thomasveit.com/
I tought the problem could be the height of an element as I know that this is a common problem with Javascript/jQuery animations, but that didn't solved the problem...
Anybody an idea what the problem could be?
Note this code in your bootstrap CSS file (line 4908)
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
This sets the opacity of a .close element to 0.5 onHover. Your shade just so happens to have this class, and while it is onScreen, you are hovering over it, setting its minimum opacity to 0.5 until it is removed. If you click close and then quickly move your mouse out of the browser window, the transition is perfect.
Note that this class (.close) is added to the element when the close button is clicked and removed when the element disappears completely.
As soon as it is removed from the DOM, you stop hovering over it, but at that point, the last 50% opacity is removed instantly.
Remove opacity: 0.5; and filter: alpha(opacity=50); and the transition is steady.
I think you should not combine things like visibility: hidden or display:none with an opacity animation.
What happens if you only use opacity without all the visibility attributes.
Reason why this animation stops abruptly is because of the other execution of the other rules also. Right when your animation is executing.
I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded IE8! Problem: on animation I am seeing some ugly artifacts:(
I know that I can solve this by removing background and adding the same background color to my animated div and to my container div,but it is NOT an option in my case. Can somebody suggest solution to this?
My code:
$(document).ready(function() {
$(".img").animate({
opacity: 0
});
$(".glow").click(function() {
$(".img").animate({
opacity: 1
}, 5000);
});
});
By adding IE filters to my CSS I have partially solved this issue (much better now and no black halo).
Lost whole day with this so I hope it will help someone more fortunate than me:)
.img{
display:block;
width:230px;
height:300px;
owerflow:hidden;
position:relative;
outline:none;
/*Notice (ugly) IE filter here and Source to my PNG image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.robertpeic.com/glow/glow.png) alpha(opacity=0);
background:none;
margin:0px auto;
padding-top:10px;
}
That's what you get when you change opacity of the images with alpha transparency in IE7 and IE8. There is another question about the same IE GIF/PNG Transparency issue with jQuery
I'm looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can't really modify the site itself (http://cargocollective.com/maureengriswold) or I'd have figured out some shoddy way of doing it already.
Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.
On your site, you would add the following CSS:
.cardimgcrop {
background-color: black;
border-color: white;
}
.cardimgcrop img {
opacity: 0.7;
}
.cardimgcrop img:hover {
opacity: 1;
}
UPDATE:
If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):
$(document).delegate('.cardimgcrop img', 'mouseover', function() {
$(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
$(this).fadeTo(500, 0.7);
});
Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.
Not entirely sure what you mean by transparent black shadowing, but I think you mean an effect like a veil over it, which lifts on hover and returns on mouseout?
You can probably achieve this effect entirely using css. Something like this:
DIV.myClass{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(255,255,255,1);
You'll want to play around with the exact CSS to achieve the effect you want, and also you'll want to test in various browsers as CSS transition support is not 100%.
You can read more on CSS Transitions at the MDN documentation site.
CSS filters are another option http://html5-demos.appspot.com/static/css/filters/index.html
I hae a very simple application. I create bubbles at the bottom of the page and have them floating to the top of the page.
I've tried two methods to do this:
1) Using a repeating JavaScript function that loops through the bubbles DOM and uses jQuery to decrease the "top" CSS property:
function frame() {
$(".bubble").each(function() {
$(this).css("top", "-=5");
});
}
2) Using webkit CSS transitions:
.bubble {
-webkit-transition: top 5s linear;
top:-200px
}
Both methods work fine on a desktop browser, but neither does very well in a mobile environment. The CSS option is marginally faster, but still not what I'd call good.
Any tips?
Try:
.bubble {
-webkit-transition: top 5s linear;
-webkit-transform: translate3d(0px, -200px, 0px);
}
On iOS at least, that will be hardware accelerated. If you want this to be slightly more backward compatible, then:
.bubble {
-webkit-transition: top 5s linear;
-webkit-transform3d(0,0,0);
-webkit-transform: translate(0px, -200px);
}
Will work on browsers without 3d transforms, whilst still getting HW accel. I'd verify that the first one improves performance, then check that the 2nd one also works as well, rather than just using the second one!
I would recommend trying it with canvas.
Two examples:
http://3.paulhamill.com/node/39
http://blog.hostgrenade.com/wp-content/demo/bubbles/