Another option might be to use jQuery to time a class addition/removal
and use a transition property in your CSS file and do a feature check
for CSS transitions with a JS (jQuery) fallback.
CSS
#slider img.current { opacity: 1; transition: opacity 1sec ease-in-out;}
#slider img { opacity: 0; transition: opacity 1sec ease-in-out; }
NOTE: the transition property is used differently by different vendors,
so it's important to use your supported vendor prefixes (-moz-,
-webkit-, etc) followed by the regular property.
But then you could use something like Modernizr.js to tell if the
browser has the "transition" feature and provide a fallback function
like what Bazinga had mentioned.
With more features like this being supported in newer browsers, it's
only a matter of time til fallbacks won't be so crucial.
- Brandtley
On 6/15/2011 3:23 PM, Tony Thomas wrote:
Pardon me. I didn't read your post fully. I missed the part about a
"smooth" transition.
On Wed, Jun 15, 2011 at 2:48 PM, Tony Thomas <[email protected]
<mailto:[email protected]>> wrote:
Why use JQuery at all? Just use a :hover pseudo class.
#divcontainer{ background:url('images/one.jpg');}
#divcontainer:hover{ background:url('images/two.jpg');}
On Wed, Jun 15, 2011 at 12:15 PM, Bazinga Designs
<[email protected] <mailto:[email protected]>> wrote:
Here, read this:
http://css.dzone.com/news/jquery-image-cross-fade-transi
and this:
http://plugins.jquery.com/plugin-tags/crossfade
should help you not to reinvent the wheel :)
2011/6/15 Vishnu vg <[email protected]
<mailto:[email protected]>>:
> Hi all,
>
> I have a div with a background image named "one.jpg". when i
hover over it i
> want to change it to another image or background colour. How
can i achieve
> it using jquery. Now when i put jquery the change is not
smooth . I want a
> slow change from current backgroudn image to another colour.
Please help me
> in this regard
>
>
> #divcontainer{ background:url('images/one.jpg');}
>
> The above seen code is the css code for my div. When i hover
over it the
> imageshoulde change from current image to a backgroudn
colour and on
> mouseout it should be the old image agagin. On mousehover
the image should
> be a clour filled in the entire box. I tried to achieve it
using jquery but
> the transition is not smooth. I want a smooth transition
from current image
> to some colour while hovering it and on mouse out , it
should return back to
> old image again.
> Please help me
>
> --
> With Love,
> Vishnu,
> Mobile : 9544455735 <tel:9544455735>
>
> --
> --
> You received this because you are subscribed to the "Design
the Web with
> CSS" at Google groups.
> To post: [email protected]
<mailto:[email protected]>
> To unsubscribe: [email protected]
<mailto:[email protected]>
--
BAZINGA Designs
http://www.bazingadesigns.com
Igor Wnuk
Ul. PCK 5/20
24-100 Puławy
tel. 667 200 706
REGON: 060622686
NIP: 716-255-43-47 <tel:716-255-43-47>
--
--
You received this because you are subscribed to the "Design
the Web with CSS" at Google groups.
To post: [email protected]
<mailto:[email protected]>
To unsubscribe: [email protected]
<mailto:[email protected]>
--
--
You received this because you are subscribed to the "Design the Web
with CSS" at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
