Case Study: Flash vs. jQuery rotator

Phil LaNasa

14 years ago

In this study, our goal was to compare the development time to create a very simple 3 slide rotator in jQuery vs. Adobe Flash.

From the start, It seems clear that jQuery poses a couple advantages:

Free
No proprietary software required
Ability to change the fade / delay speeds easily

While, Adobe Flash will certainly offer more control to fine tune any given rotator / slideshow.

For our Case Study, I was looking to create a very simple rotator with simple fade in/out transitions and image captions.

Results:

jQuery rotator: 35 minutes

Flash rotator: 32 minutes

Given the slight development time improvement of the Flash rotator, my personal choice would still be jQuery. The jQuery rotator has fewer dependencies (the jQuery library and that the browser supports Javascript). The code is also clean and elegant. Given, that if this rotator had more the 3 slides, the code would get a little "nested".

The CSS

body { margin-top: 80px; background-color: #030001; } div { position: absolute; left: 50%; top: 50%; margin-left: -375px; margin-top: -280px; } table { display: none; position: absolute; left: 50%; top: 50%; margin-left: -500px; margin-top: -205px; } table td { text-align: center; width: 485px; padding-left: 15px; } table td:first-child { padding-right: 15px; padding-left: 0; } img { display: none; } table img { display: block; } a img { border: 0; }

.slide-text { margin-top: 35px; }
.enter { margin: 23px auto; }

The jQuery

$(window).load(function(){ $('#slide1-image').fadeIn(2000, function() { $('#slide1-text').fadeIn(2000, function() { $('#slide1-image').delay(3000).fadeOut(1500); $('#slide1-text').delay(3000).fadeOut(1500, function() { $('#slide2-image').fadeIn(2000, function() { $('#slide2-text').fadeIn(2000, function() {

                        $('#slide2-image').delay(3000).fadeOut(1500);
                        $('#slide2-text').delay(3000).fadeOut(1500, function() {

                            $('table').fadeIn(3000);

                        });

                    });
                });

            });

        });

    });
});

The HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>sitekickr Example</title> <link media="screen" rel="stylesheet" href="img.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="img.js"></script> </head> <body>