|
CSS - Css Transitions...right Tool Or No?
I was recently working on something in JQuery where on click I was fading out a div and then fading it back in.
To learn more about CSS transitions, I wondered whether I could do the same thing with transitions. So I set up a simple bit of JQuery that toggles a class on and off to trigger the transition. It seems that it's not possible to fade out to 0 in a transition and then fade back in. Unless I'm missing something, you can't set a midpoint of opacity 0. You can use a CSS animation to do that, but it's not clear to me how you play the animation again when I remove the class. Am I missing something? Am I just using the wrong tool for the job and should stick with JQuery's fadeOut() and fadeIn() functions? Similar TutorialsIf i set an id to a transition like so: Code:
Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
Then it works fine, but if i use the class ".trans" instead, it doesnt. Im looking for a way to use a style more than once on a page and classes are the only way i know how to do it. Any help? I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE. also for testing i made a link tool tip and it works in IE but its cropped horribly. you can check it out by looking he http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504 heres the style classes: Code:
a span
{
display: none;
}
a:hover span
{
position: absolute;
display: block;
background: grey;
border: 1px solid black;
}
a:hover
{
color: 000000;
background-color: grey;
text-decoration: none;
font-size:16;
}
heres the div placement: Code: <div class="aim"> <a> <img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif"> <span>allaimnamesRused</span></a> </div> by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them Hi I want to make a tool where my users can select an area in an image, via resizing a select rectangle. Do you guys know if this tool is available somewhere? Thought that it's stupid to re-invent the wheel.... Regards, Chrille I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions? I want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color? (I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point) Thanks, Beth Hi all I'm working with Firefox and Firebug plugin. I want to check if the CSS I use is valid *the way browsers interpret it*. Example: Code: /* Valid: */
div.my {
position: relative;
z-index: 10;
}
/* Invalid: */
div.my {
z-index: 10; /* The attribute is not applied to the div, because it's not positioned! These sort of errors I want to get to know somehow! */
}
/* Valid: */
div.my {
z-index: 10; /* At this point the CSS isn't valid yet... */
}
div.my {
position: relative; /* Now it is valid (I guess, because I guess the browser first parses all CSS available and only after this it assigns the attributes?) */
}
I hope you see what I mean. I came upon this because I had some problems with z-indexes and then remembered that every z-positioned element needs to be positioned. If I had a cool Firefox plugin that would have checked the CSS every time before it were applied to the document and warned me this wouldn't have been a big problem. ;-) Thanks a lot for help Josh http://typetester.maratz.com/ I am not the author, but this is sweet! I am developing a help manual and I'd love to include screenshots in the CSS section that shows the page with an opaque type overlay with a description of each CSS rule. Something like the Developer tools in IE or FF when you use the "select element by click" function, except that I'm after all elements selected by default (together with the CSS ID). Is there such a thing? |
|||||||