jquery animate:对齐中心h1

时间:2017-10-23 16:34:14

标签: jquery

我试图水平对齐中心h1。有可能的? 这是小提琴:http://jsfiddle.net/3vXah/239/ HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickme'>button</button>
<h1 id='book' style='position:absolute; top:40px; opacity: 0; text-align: center;'>Tekst trololololol lo l o l dlld</h1>


$('#clickme').click(function() {
  $('#book').animate({
    opacity: 1, // animate slideUp
    marginLeft: '+=300px'
  }, 900, 'swing', function() {
  });

  $('#book').animate({
              opacity: 1, // animate slideUp
              marginLeft: '+=100px'
            }, 8000, 'linear', function() {
   });

  $('#book').animate({
                      opacity: 0, // animate slideUp
                      marginLeft: '+=300px'
                    }, 900, 'swing', function() {
                      $(this).remove();
                    });

});

1 个答案:

答案 0 :(得分:1)

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <div class ="alignMiddle">
                <button id='clickme'>button</button>
                <h1 id='book'>Tekst trololololol lo l o l dlld</h1>
                </div>

        <style>
            #book{
              opacity: 0;

            }
            .alignMiddle{
              text-align: center;
            }
            </style>

    <script>
    $('#clickme').click(function() {
      $('#book').animate({
        opacity: 1, // animate slideUp
        marginLeft: '+=300px'
      }, 900, 'swing', function() {
      });

      $('#book').animate({
                  opacity: 1, // animate slideUp
                  marginLeft: '+=100px'
                }, 8000, 'linear', function() {
       });

      $('#book').animate({
                          opacity: 0, // animate slideUp
                          marginLeft: '+=300px'
                        }, 900, 'swing', function() {
                          $(this).remove();
                        });

    });
</script>