css3 animation using transform - javascript

First li in line of several ones doesn't glue to the next one if the first one smoothly derceases to 0 using css3 animation via transform property. Why?
Working sourcecode example: http://codepen.io/anon/pen/lLpeo
Thanx

Because you use scaleX. It actually doesn't change the size of the li but scales it. I think the solution is to use width property http://codepen.io/anon/pen/lIbyC
#-webkit-keyframes 'movement'{
to {
width: 0px;
}
}

Related

Make div non-transparent to cover original div

I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered completely.
Apparently 'opacity' does not fix it.
<div id="stimuli"> Just press B and get started... </div>
$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");
CSS:
#whitebox{
background: #fc3a54;
opacity: 1;
position:absolute;
height: 80%;
width: 70%;
}
Is there a simple trick to fix the transparency issue with my code above, or any other hints?
try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front
Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery.com/fadeToggle/) as well.

Hover over image, darken background only

I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}
You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/

Why are my images moving from Jquery bounce effect?

I just want the bounce effect to be on the mousover of the #bounce1,2,3... images on the homepage, but it seems to be forcing images to the next line.
what gives?
http://jameshiggins.ca/nlms/
You can achieve the same effect without JavaScript and jQuery, using only CSS3. Use #keyframes to define the key frames and then use it in animation property.
Here is the JSFiddle demo regarding to your example.For more information about the animation property of CSS3 please check this URL.
You'll want to add this to your style sheet.
#fp_brands a .ui-effects-wrapper {
float: left !important;
width: 33% !important;
}
The ui-effect-wrapper div that jquery-ui uses in it's animations can sometimes mess up floated elements. This is because it's css rules include width: 100%; and float: none;
Using the element inspector, applying float:left; to each image made them animate as desired. I would apply it to the class attachment-medium if you don't use it anywhere else to save code
Try to add this css and remove width="33%" from img tag?
.attachment-medium {
position:relative;
width:235px;
height:100px;
}

Can I set a div's background to be two different images filled to 2 different %'s?

After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks
You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.
This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.
Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);
No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}

Animate opacity doesn't work properly on IE

I'm trying to use animate() to change the height and opacity of a div. The div has an image background in CSS. It works fine on Firefox and Safari, but when I test it in IE the background is being removed. This is my code:
if (jQuery.support.opacity) {
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}
How can I fix this problem?
I was under the impression that jQuery did the whole opacity support thing for you.
Does this work for all browsers?
$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
You do not need to write a special handler for IE, jQuery does it all for you behind the scenes:
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);
HOWEVER: If you have a 24-bit transparent PNG as your background image that is disappearing, you need to be aware that you cannot combine filter: alpha (which jQuery correctly uses behind the scenes in IE) with a 24-bit transparent PNG in IE7 or IE8. I believe the only way around it is to set a background color (other than transparent) on the object on which you are using filter: alpha
How to test: Simply set a background color on #list_box to a solid color by adding something like this to your CSS after your background-image declaration:
#list_box { background-color: red }
If the background image remains, and your #list_box animates correctly (except for the hideous background) you know what the problem is and will have to find another way to accomplish what you want.
I've been having the same problem. I stumbled into the answer, when I set the opacity to 40%:
$('#list_box').stop().animate({opacity: '.4'},"slow");
I noticed that made the opacity jump to 100%, then animate down to 40%. Eureka.
So, now I explicitly set the opacity to zero before the animation:
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");
That animates smoothly, except the text still looks horrible in IE.
To clean up the text, I removed the opacity from the css in IE after the animation. This seems to clear up the text quite a bit in IE6 and IE8.
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
//remove the opacity in IE
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$('#list_box').css({opacity:''});
}
});
});
I'm testing it on a Mac in Parallels, in IE6 and IE8. Everything seems to work fine on the Mac side.
Very (very) late with the answer, but as this is at the top of Google when I looked for help with a jquery v animate issue in IE8 I thought i'd post it here.
My problem was connected to the hasLayout bug in IE, and adding "display: inline-block" to the element to be faded fixed the problem.
I had the same sort of issue with this:
$('#nav li').hover(function() {
$(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
$(this).stop().animate({opacity: '1'}, 'slow');
});
I simply added float:left; to the #nav li css and it fixed the issue.
In jQuery, once the div is set to have either opacity:0 (in Standards Compliant Browsers) or filter:alpha(opacity=0) in IE, you can just use $('#div').animate({opacity:1},100); Since jQuery supports cross-browser support, if you end up animating the filter via IE, then chances are jQuery is trying to support IE and the conflict comes when jQuery fires the opacity change x2.
I hope this helps. I have had the same issue, plus odd issues with IE not being able to handle fading on a div stack with multiple items in it.
I noticed the problem was caused by position:relative of the container. If "switching" to absolute opacity animation will work.
I´ve had the same problem with the IE 7,
the problem was a trailing comma after the opacity property
jQuery(this).animate({opacity:1.00,},800);
It has to be:
jQuery(this).animate({opacity:1.00},800);
I found a solution that worked for me: position:inline-block;
This works for fading text opacity, I haven't tried it with a CSS background image. Maybe it helps anyway.
I just wanted to report a small bug with fadeTo method in Internet Explorer 8. It won't work if your element as "display" set to "inline". I found that you need to put it to "inline-block" and then it works perfectly. There is nothing about this on the web and it's not the first time I have this problem.
Don't know if it's the right way to report this issue, but i'm sure someone will read this post :)
found at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm
I solved it with adding an opaque background to the animated element:
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 195px;
height: 274px;
cursor: pointer;
background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: alpha(opacity=0); /* IE6-7 */
zoom: 1;
}
JS:
$('.overlay').hover(
function(){
$(this).animate({'opacity': 0.7}, 300);
},
function(){
$(this).animate({'opacity': 0}, 250);
}
);
Works for IE7-8
Hope this will help someone ;)
You can use fadeTo to accomplish what you want to do:
$('#list_box').fadeTo("slow", 0.33);
fadeIn and fadeOut do transitions from 0 to 100%, but the above will allow you to fade to an arbitrary opacity.
(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)
Same problem with IE8. Adding "display: inline-block" to .hover2 in fixed the problem.
$(function() {
$(".hover1").css("opacity","1.0"); // Default set opacity to 1.0
// On Mouse over
$(".hover1").hover(
function () {
// SET OPACITY TO 15%
$("span.hover2").stop().animate({opacity: 0.15}, 1200);
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 100%
$("span.hover2").stop().animate({opacity: 1.0}, 1200);
}
);
}
);
Ok this might help a little bit, I found a solution in this site about the exact problem http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
in conclusion, the general problem is the opacity filter on IE, in your specific case there is not much you can do, thought
but in case you fade in and out, the prevent the problem with a png background image you just have to remove the filter attribute the jQuery function added whe the fx ends. Just use a callback function, something like that would do it:
$('#node').fadeOut('slow', function() {<br/>
this.style.removeAttribute('filter');<br/>
});
in case you selectors returns more than one, use the each function, something like this:
$('.nodes').fadeIn('fast',
function() {
$(this).each (
function(idx,el) {
el.style.removeAttribute('filter');
}
);
}
);
Do you use some pngfix script ? that may be the culprit.

Categories

Resources