CSS vs jQuery

This demo shows the differences between using CSS transitions and jQuery transitions. What's the difference? In a nutshell, CSS uses your graphic card to process the transition, where as using jQuery uses your main processor. However jQuery is generally more backwards compatible than CSS. That said, CSS transitions will revert to jQuery if the browser doesn't support CSS transitions.

CSS

jQuery

HTML Markup

<h3>CSS</h3>
<ul id="css-demo">
  <li>
    <a href="#slide1">
      <img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
    </a>
  </li>
  <li>
    <a href="#slide2">
      <img src="/assets/img/image-2.jpg"  alt="This is caption 2">
    </a>
  </li>
  <li>
    <a href="#slide3">
      <img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
    </a>
  </li>
  <li>
    <a href="#slide4">
      <img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
    </a>
  </li>
</ul>
<h3>jQuery</h3>
<ul id="jquery-demo">
  <li>
    <a href="#slide1">
      <img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
    </a>
  </li>
  <li>
    <a href="#slide2">
      <img src="/assets/img/image-2.jpg"  alt="This is caption 2">
    </a>
  </li>
  <li>
    <a href="#slide3">
      <img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
    </a>
  </li>
  <li>
    <a href="#slide4">
      <img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
    </a>
  </li>
</ul>

jQuery

jQuery('#css-demo').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box css-demo" />', // wrapper to wrap everything, including pager
  // options
  adaptiveHeight: true, // height of the sliders adapts to current slide
  useCSS: true, // true, false -> fallback to js if no browser support
  autoHover: false,
  transition: 'horizontal'
});

jQuery('#jquery-demo').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
  // options
  adaptiveHeight: false, // height of the sliders adapts to current slide
  useCSS: false, // true, false -> fallback to js if no browser support
  autoHover: false,
  transition: 'horizontal'
});
Out-of-the-box Pictures Portfolio News Shop Thumbnails CSS vs jQuery