Responsive Icon für Tablet
Icon für Tablet
Icon für Smartphone
Icon für Smartphone

Silke Bötzel
Dipl. Informatikerin

Auf dem Spiekstück 5
58239 Schwerte

T (0 23 04) 69 74 14

Newsanimation mit jQueryUI

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>switchClass demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
      .newscontainer {
      background-color: #ccc;
      width: 854;
      height: 246px;
      position: relative;
      }
      .news2,.news3,.news4 {
        position: absolute;
      width: 200px;
      height: 80px;
      border: 1px solid black;
      }
      .news2 {
        top: 0;
      left: 0;
      }
      .news3 {
        top: 82px;
      left: 0;
      }
      .news4 {
        top: 164;
      left: 0;
      }
      .news1 {
        top: 0;
      left: 202px;
        position: absolute;
      width: 650px;
      height: 244px;
      border: 1px solid black;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>html, body { border:0; margin:0; padding:0; }body { font-family: 'Helvetica', 'Arial',  'Verdana', 'sans-serif'; }</style>
  </head>
  <body>
    <div class="newscontainer">
      <div class="news1" style=""><div style="background-color: red;height: 100%;">News1</div></div>
      <div class="news2" style=""><div style="background-color: yellow;height: 100%;">News2</div></div>
      <div class="news3" style=""><div style="background-color: green;height: 100%;">News3</div></div>
      <div class="news4" style=""><div style="background-color: blue;height: 100%;">News4</div></div>
    </div>
    <script>
      $(document).ready(function () {
        $( "div.newscontainer" ).on('click', function() {
          $(".news1").switchClass( "news1", "news4", 1000, "easeInOutQuad" );
          $(".news2").switchClass( "news2", "news1", 1000, "easeInOutQuad" );
          $(".news3").switchClass( "news3", "news2", 1000, "easeInOutQuad" );
          $(".news4").switchClass( "news4", "news3", 1000, "easeInOutQuad" );
        });
      });
    </script>
  </body>
</html>