www.webdeveloper.com
Results 1 to 3 of 3

Thread: Cross Browser Fade in/out effect using pure CSS?

  1. #1
    Join Date
    Mar 2013
    Posts
    24

    Question Cross Browser Fade in/out effect using pure CSS?

    Well after an hour searching online, I have yet to find a solution. Any help would be greatly appreciated.

    I need to make an image fade in on page load... then fade out... then back in every 3-4 seconds.

    So much the better if I could make the image fade in... then a mild cycling flicker effect about every 3-4 seconds.

    ...and something that works cross browser. If the browser isn't supported then simply have the static image displayed.

    Is this possible?

    If so anyone have some code examples I can work from?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    You can't do this in pure CSS. You're going to need some JavaScript to detect the triggering event. It's probably simpler, in a way, to add browser compatibility with JavaScript. But if you look at the code for many slideshows, you'll find cross-browser fade-in/out, and other effects. All you'd have to do would be to set up the appropriate setTimeout() function(s).
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Sep 2013
    Posts
    221
    Try out with the below code.

    $(document).ready(function () {

    // simplest solution
    $('img').hide(0).delay(3000).fadeIn(333, function () {
    $(this).fadeOut(333, function () {
    $('#content').fadeIn(333);
    });
    });

    });

    Hope this helps you.
    strad solutionswww.stradsolutions.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles