JQuery Slide Animation + CSS

I've been searching for so long how to make a JQuery slide out on a div. There been some documentations but I've not found the one that suits my problem.

I simply want Text 1 to slide out to the left and at the same time Text 2 to slide in from the right and be centered on the screen.

enter image description here

Here's the code ^-^.

enter code herehttps://jsfiddle.net/sru33se6/4/

Answers 1

  • I did it using jquery ui toggle slide. run snippet below (click anywhere to slide the text)

    var startWithText1 = true;
    var first;
    var second;
    $(document).click(function() {
      if (startWithText1) {
        first = $("#text1");
        second = $("#text2");
      } else {
        first = $("#text2");
        second = $("#text1");
      }
      first.toggle("slide", {
          'direction': 'left'
        }, 500,
        function() {
          second.toggle("slide", {
            'direction': 'right'
          }, 500)
        }
      );
      startWithText1 = !startWithText1;
    });
    body {
      display: flex;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    
    .content {
      display: flex;
      margin-left: auto;
      margin-right: auto;
    }
    
    .text {
      width: 200px;
      height: 100px;
      background-color: teal;
      font-size: 72px;
      color: white;
      display: flex;
      border: 4px solid black;
      border-radius: 5px;
      margin-left: 10px;
    }
    
    .text h1 {
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
    <link rel="stylesheet" href="../css/test.css">
    
    <div id="content" class="content">
      <!--Text 1 slides  smooth out to the left.-->
      <div class="text">
        <h1 id="text1">Text 1</h1>
        <h1 id="text2" style="display: none;">Text 2</h1>
      </div>
    </div>


Related Articles