Develop Reference

CSS transition on click

I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/

You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that

I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!

fade css background images on hover

$(function(){
$('#product .btn-purchase')
.mouseover(function(){
$(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
})
.mouseout(function(){
$(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
});
});
.. not sure why this isn't work, what am I doing wrong?

The animate function predominately works on a numeric CSS property.
for details you can look here : http://api.jquery.com/animate/
EDIT:
I would suggest that you use the fadeIn / out method in jQuery instead. For instance , you could do something like this below. ( Code off the top of my head, assumes you have the div with the correct image after the .btn-purchase )
$(function(){
$('#product .btn-purchase')
.mouseover(function(){
var $this = $(this);
$this.fadeOut(function(){ $this.next().fadeIn(); });
})
.mouseout(function(){
$this.fadeOut(function(){ $this.prev().fadeIn(); });
});
});
I would also like to add that incase you are not supporting IE, then using CSS transitions may be of help.
Have a look at this answer animating addClass/removeClass with jquery since it is definately a better / more efficient method in my opinion
Shreyas N

I know, that this is not exactly an answer to your question. But as Jan commented before, you might think about implementing this in css.
Just to give you an idea what it might look like:
#product .btn-purchase{
background-color: blue;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
}
#product .btn-purchase:hover{
background-color: red;
}

You need to use document.ready so your code runs after the DOM has completely loaded, something like this :
$(document).ready(function() {
$('#product .btn-purchase')
.mouseover(function(){
$(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
})
.mouseout(function(){
$(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
});
});

JQuery animate is used to animate CSS properties and not classes. As this answer shows, a better way might be to use CSS transitions (if you're only supporting CSS3). Alternatively, if you want to animate lots of things you'll need to supply them as CSS properties in the .animation() method.
Hope that solves you're issue.

trying to fade one type into another on hover - CSS3 or Jquery?

My dilemma is I know how to fade one image into another on hover using the jquery animate method:
$(document).ready(function(){
$("img.a").hover(function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
And I also know how to use CSS3 Transitions to change the hover color on text:
a.squirrel{
color:black;
padding:5px;
-webkit-border-radius: 5px;
-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
a.squirrel:hover{color:red;}
What I don't know how do, but want to do, is to take a link with one kind of font like Georgia (trying to keep it simple for demonstration purposes) and when you hover over it, fade it into a totally different kind of type such as Tahoma.
I've using both of these methods, but neither seems to give me the desired effect.
I know I can use the images of the type I want to use, but I'm trying not to use images, so vanilla Javascript or some other jQuery method is what I'm looking for.
Is this possible to do??

If you're talking about actually creating a smooth transform between font-style's this really isn't possible. But, if you just want to create a fade effect on hover to transition between two font styles, something like this should work:
http://jsfiddle.net/7NATE/8/
HTML
<div id="container">
<span class="font1">Hello World!</span>
<span class="font2">Hello World!</span>
</div>
CSS
.font1{
font-family: Tahoma;
}
.font2{
font-family: Georgia;
display: none;
}
JS
var $f1 = $(".font1"), $f2 = $(".font2"), $c = $('#container');
$c.hover(function(){
if(!$f1.is(':animated') && !$f2.is(':animated')){
$f1.fadeOut(function(){
$f2.fadeIn();
});
}
},
function(){
if(!$f1.is(':animated') && !$f2.is(':animated')){
$f2.fadeOut(function(){
$f1.fadeIn();
});
};
});

How about using .fadeOut, .load a new image to the element and then .fadeIn? The fadein/out function is a lot more convenient than using opacity.. you can even change the speed and "slope" of the transition..

In either way, css or js, I don't we can change font-family in slow motion.
For color, background, width, height, or etc, We can calculate the state in each frame when it is animated.
But for font-family, I don't think it's possible to calculate frame state during the period of animation, unless font-family is an image, but it is not.

If Browser, Use Javascript?

I have a script that detects what browser (and version) someone is using, and I'd like to set it up so that for certain browsers, a div class gets an animation on hover. I'd like to do this using jQuery, but I'm open to whatever.
My idea for the JavaScript is this...
if (browser == IE || browser < Firefox 4) {
// somehow animate a div class on hover (could be id-based too)
} else {
// do nothing
}
The CSS I have set up for this is something like this
.item {
height: 100px;
width: 100px;
/* css3 */
transition: height .5s, width .5s;
-moz-transition: height .5s, width .5s;
-webkit-transition: height .5s, width .5s;
}
.item:hover {
height: 200px;
width: 200px;
}
And then the HTML is (obviously)
<div class="item" id="item">
<p>Content here</p>
</div><!-- end item -->
The purpose is a CSS3 fix for older browsers. Transitions are, in my opinion, one of the best things about CSS3, and it annoys the hell out of me that IE9 doesn't include support for them.

Instead of this, how about using something like the Modernizr library?
http://www.modernizr.com/
Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.
You can then do stuff like this:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}

You're going down a very dangerous path here using browser sniffing like that.
What you should be trying to do instead is use feature detection. There are libraries out there like the fantastic Modernizr which can do this for you.

Use $.support to check if the browser supports it and not even have to mess with version detecting. This helps future proof your code and more accurately models what you really want to do.
In fact, there's already a jQuery plugin to do this specifically. :D

Browser sniffing is not the best way to write JS-code.
If you prefer jQuery, here is jQuery.browser object
Some examples:
if ($.browser.webkit) {
alert( "this is webkit!" );
}
var ua = $.browser;
if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
alert( "Do stuff for firefox 3" );
}
if ( $.browser.msie ) {
$("#div ul li").css( "display","inline" );
} else {
$("#div ul li").css( "display","inline-table" );
}

You could do something like this:
<![if (IE 6)|(IE 7)|(IE 8)]-->
<link type="text/css" rel="stylesheet" href="nocss3.css" />
<script type="text/javascript" src="nocss3.js"></script>
<![endif]-->

You can use the library Modernizer (http://www.modernizr.com) which detects and fixes support of various HTML 5 and CSS3 features on different browsers.
Here's what they have in their documentation about CSS3 transitions:
http://www.modernizr.com/docs/#csstransitions
CSS Transitions are an incredibly
useful new part of CSS3. Using them,
you can let the browser animate—or
rather, transition—from one state to
the other. You only have to specify a
start and end and the browser takes
care of the rest.
In Modernizr we test for CSS
Transitions using the transition
property with all vendor prefixes.
Transitions can typically be used
without using Modernizr's specific CSS
class or JavaScript property, but for
those occasions you want parts of your
site to look and/or behave differently
they are available. A good example use
case is to build Modernizr into an
animation engine, which uses native
CSS Transitions in the browsers that
have it, and relies on JavaScript for
the animation in browsers that don't.
Sample Usage:
a {
color: #090;
-webkit-transition: color .2s ease-out;
}
a:focus,
a:hover {
color: #9f9;
}

You might look in to this tutorial https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support

How would I implement stackoverflow's hovering dialogs?

I am in love with stackoverflow's single-color "click-to-close' hovering dialog boxes that greet a user when they try to vote and aren't logged in or use the site incorrectly. Any idea how and/or what technology Jeff used to implement these neat little devices?
EDIT: I'm specifically talking about the SQUARE dialog boxes that say "Click To Close" on them. I know how to implement the rectangular strip on the top of the screen.

Although I was under the impression they used jQuery's UI Dialog for this, I am not too sure anymore. However, it is not too difficult to whip this up yourself. Try this code:
$('.showme').click(function() {
$('.error-notification').remove();
var $err = $('<div>').addClass('error-notification')
.html('<h2>Paolo is awesome</h2>(click on this box to close)')
.css('left', $(this).position().left);
$(this).after($err);
$err.fadeIn('fast');
});
$('.error-notification').live('click', function() {
$(this).fadeOut('fast', function() { $(this).remove(); });
});
With these styles:
.error-notification {
background-color:#AE0000;
color:white;
cursor:pointer;
display: none;
padding:15px;
padding-top: 0;
position:absolute;
z-index:1;
font-size: 100%;
}
.error-notification h2 {
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:140%;
font-weight:bold;
margin-bottom:7px;
}
And click here to see it in action.
However, I think you'd still need to tweak it a little bit to give it the right positions depending on the situation in which you are using it. I took care of this for the left position because it is working for the top, but I think there may be some situations in which it won't. All things considered, this should get you started. If you want a more robust implementation, you should check out jQuery BeautyTips which is really awesome and would make this trivial to implement.

You can use the jQuery library in conjunction with jQuery UI to create dialogs.