Slider / Fader Demo

CSS Plus

by ChristopherBurton

HTML

<p>Demo</p>
<a href="#" class="slider">Slider</a>
or
<a href="#" class="fader">Fader</a>
    <div class="slider1">
        <img src="http://rock-releases.com/_ph/1/665704194.jpg" width="630px" height="290px" />
    </div>
    <div class="slider2">
        <img src="http://www.g-star.com/media/images/sized/Friends_Anton_Corbijn.101_anton-corbijn_001-0/1600.jpeg" width="630px" height="290px" />
    </div>

CSS

.slider1, .slider2 {position: absolute;}

JavaScript

$(".slider2").hide();

$("a.slider").click(function() {
  $(".slider2").fadeIn("slow", "linear");
  $(".slider1").fadeOut("slow", "linear");
});
$("a.fader").click(function () {
  $(".slider1").fadeIn("slow", "linear");
  $(".slider2").fadeOut("slow", "linear");
});