Image Cross Fade Transition

Posted Thu, 04/14/2011 - 23:31

Плавная смена изображений при помощи jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
<title>Two image cross fade transition demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// when the DOM is ready:
$(document).ready(function () {
  // find the div.fade elements and hook the hover event
  $('div.fade').hover(function() {
    // on hovering over, find the element we want to fade *up*
    var fade = $('> div', this);
   
    // if the element is currently being animated (to a fadeOut)...
    if (fade.is(':animated')) {
      // ...take it's current opacity back up to 1
      fade.stop().fadeTo(250, 1);
    } else {
      // fade in quickly
      fade.fadeIn(250);
    }
  }, function () {
    // on hovering out, fade the element out
    var fade = $('> div', this);
    if (fade.is(':animated')) {
      fade.stop().fadeTo(3000, 0);
    } else {
      // fade away slowly
      fade.fadeOut(3000);
    }
  });
});
</script>

<style type="text/css">
.fade {
  position:absolute;
  _top:100px;
  _left:100px;
}

.fade div {
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.fade.one {
  position:absolute;
  top:0;
  left:0;
}

.fade.two {
  position:absolute;
  top:0;
  left:220px;
}

.fade.three {
  position:absolute;
  top:0;
  left:440px;
}

.fade.four {
  position:absolute;
  top:0;
  left:660px;
}

#wrapper {
        width:980px;
        margin:0 auto;
        position:relative;
}
</style>
</head>

<body>

<div id="wrapper">

<div class="fade one">
<a href="kategorii/dizain"><img src="dizain.png" style="width: 200px; height: 234px;" /></a>
<div><a href="kategorii/dizain"><img src="bdizain.png" style="width: 200px; height: 234px;" /></a></div>
</div>

<div class="fade two">
<a href="/kategorii/kopiraiting"><img src="kopiraiting.png" style="width: 200px; height: 234px;" /></a>
<div><a href="/kategorii/kopiraiting"><img src="bkopiraiting.png" style="width: 200px; height: 234px;" /></a></div>
</div>

<div class="fade three">
<a href="/kategorii/mebel"><img src="mebel.png" style="width: 200px; height: 234px;" /></a>
<div><a href="/kategorii/mebel"><img src="bmebel.png" style="width: 200px; height: 234px;" /></a></div>
</div>

<div class="fade four">
<a href="/kategorii/fotografiya"><img src="fotografy.png" style="width: 200px; height: 234px;" /></a>
<div><a href="/kategorii/fotografiya"><img src="bfotografy.png" style="width: 200px; height: 234px;" /></a></div>
</div>


</div><!--/wrapper-->

</body>

AttachmentSize
image_cross_fade_transition.rar402.08 KB