Related to images in CSS

[kool]

►► Related to images in CSS. Need HELP...!!!!

Hi Friends,

This question is asked by my GF. so kindly help..

I have designed a webpage, which contains a div containing image (as a logo). I want the images to fade-in and fade-out at certain time intervals for all the browsers. Presently, this is controlled by following css:-
filter: progid dximagetransform.microsoft.alpha opacity, but this works only for IE. I need some other alternative for this function which will work for all the major browsers, like IE(versions 7,8,9),firefox, chrome, safari and opera. Is there any other way for this except for Javascript?? I want something from CSS to make it work.

Thanks.

 

[clmlbx]

This is only possible with CSS3 check links below

*stackoverflow.com/questions/3079330/css3-fade-effect

CSS3 Transition

It can easily be done by Jquery fade in fade out effects.. Nothing much to learn just couple of lines of code.. and link to jquery library..

check this

jQuery Effect fadeIn() Method

 

[ajayashish]

I think there are some HTC fix found to make IE behave properly with CSS3. Please google for this.

CSS3 support in Internet Explorer 6, 7, and 8

 

[abhidev]

jquery will be a better cross-browser option...css3 is not supported in older versions of IE

 

[nbaztec]

1. You are doing the world a great disservice by using IE, coding for IE and/or supporting IE. There are great browsers, then there are good browsers, then barely callable browsers, then 50 feet of crap, then there's IE.

2. CSS property `opacity` along with `display:none` can be used to fade-in, and fade-out the images using a suitably coded setInterval() callback using step-function.

3. Use jquery fadeIn() and fadeOut() functions.

4. Use CSS3 and vendor specific transitions. Don't care about IE, it's MS's fault that their "browser" is worse than meh!


P.S. All discussion relates to IE5-8, but even IE9 ain't all that great albeit a step towards a better future.

 

[Faun]

Jquery and Jquery UI

$("#idofelement").animate({opacity: .4}, 300 );
$("#idofelement").animate({opacity: 1}, 100 );

 

[nbaztec]

Jquery and Jquery UI

$("#idofelement").animate({opacity: .4}, 300 );
$("#idofelement").animate({opacity: 1}, 100 );

Actually, the better way to do it would be:

$('#id_1').fadeOut('slow', function(){
        $('#id_2').fadeIn('slow')
});

 

[Faun]

^^It's another alternative and more customizable.