单击按钮时，div跳出适当位置

Question

问题

当我单击季后赛或常规赛季的按钮时，容纳内容players-list和players-regular players-list的div淡入淡出时似乎会跳出位置。 如何防止这种情况发生？

我已经尝试过使用固定在某些元素上的位置，但是事情会错位。 我在这里包括了一个JSFiddle： http : //jsfiddle.net/onlyandrewn/gcthaffs/

点击监听器

 // Click listener, toggles between sheets
    $('button').click(function() {
        $('button').removeClass("active");
        $(this).toggleClass("active");

        if ($('button.regular').hasClass('active')) {
            $('#players-list').fadeOut(500);
            $('.note').fadeOut(500);
            $('#players-regular').fadeIn(2000);
        } else {
            $('#players-regular').fadeOut(500);
            $('#players-list').fadeIn(2000);
            $('.note').fadeIn(2000);
        }
    });

的index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>Wheat Kings' leading point scorers</title>
    <meta name="description" content="Wheat Kings' leading point scorers">
    <meta name="author" content="Andrew Nguyen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
    <h1>Wheat Kings leading goal scorers</h1>
    <p class="year"></p>
    <button class="playoffs active">Playoffs</button>
    <button class="regular">Regular Season</button>

    <div class="top">
        <div id="players-list"></div>
        <div id="players-regular"></div>

        <p class="note">Note: Since there was a five-way tie for 6th place, players who scored two goals were then ranked by their total points in the playoffs. The other two players not listed here are Nolan Patrick and Macoy Erkamps.</p>
    </div><!-- /.top -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

    <!-- This is where the template for facts goes -->
    <script id="players" type="text/x-handlebars-template">
        <div class="container">
            <div class="group">
                <div class="{{row}}">
                    <p class="goals">{{goals}}</p>
                    <img src="{{image}}" alt="" class="head">
                    <p class="name">{{name}}</p>
                    <p class="position">{{position}}</p>
                </div><!-- /.group -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </script>

    <script type="text/javascript">
    // Click listener, toggles between sheets
    $('button').click(function() {
        $('button').removeClass("active");
        $(this).toggleClass("active");

        if ($('button.regular').hasClass('active')) {
            $('#players-list').fadeOut(500);
            $('.note').fadeOut(500);
            $('#players-regular').fadeIn(2000);
        } else {
            $('#players-regular').fadeOut(500);
            $('#players-list').fadeIn(2000);
            $('.note').fadeIn(2000);
        }
    });

      // Original
      var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1RMN49oyRlTxW5kv8MnYJwQRttis2csgVFH46kyORCaQ/pubhtml";

      $(document).ready( function() {
        Tabletop.init( { key: public_spreadsheet_url,
            callback: showInfo,
            parseNumbers: true } );
      });
      function showInfo(data, tabletop) {
        var source   = $("#players").html();
        var template = Handlebars.compile(source);

        // The actual name of the sheet, not entire .csv
        $.each(tabletop.sheets("Playoffs").all(), function(i, fact) {
            var html = template(fact);

          // You need an element with this id or class in your HTML
          $("#players-list").append(html);
          $('.container').eq(i).addClass(data.Playoffs.elements[i]);

          // This logs all the objects in the sheet
          // console.log(data);

          // This logs just validity
          // console.log(data.Playoffs.elements[i]);
      })

        // If you need to get data from a second sheet in single Google Doc
        $.each(tabletop.sheets("Regular").all(), function(i, fact) {
            var html = template(fact);

          // You need an element with this id or class in your HTML
          $("#players-regular").append(html);
          $('.container').eq(i).addClass(data.Regular.elements[i]);

          // This logs all the objects in the sheet
          // console.log(data);

          // This logs just validity
          // console.log(data.Regular.elements[i]);
      });
    }
</script>
</body>
</html>

base.scss

/*----------------------------------
MAIN STYLES
----------------------------------*/

html {
  font-size: 62.5%; /* 10px browser default */
}

body {
    max-width: 600px;
    padding: 10px;
}

.top {
    max-width: 600px;
}

#players-list,
#players-regular {
}

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}

.note {
    position: relative;
    width: 95%;
    left: 3%;
}

Answer 1

之所以发生这种情况，是因为开始淡入时淡出未完成。 最终，两个div都在短时间内可见，并且当fadOut完成后，第一个div被隐藏，您会看到跳转。

这样的事情怎么样：

$('#players-list').fadeOut(500, function() {
     $('#players-regular').fadeIn(500);
 });

这样，仅当第一个div完全隐藏时才显示第二个div。 另外，稍微减少动画持续时间，可以带来更好的用户体验;）。

单击按钮时，div跳出适当位置

问题描述

问题

点击监听器

的index.html

base.scss

1 个解决方案

解决方案1
2 已采纳 2015-04-17 20:46:08

单击按钮时，div跳出适当位置

问题描述

问题

点击监听器

的index.html

base.scss

1 个解决方案

解决方案1 2 已采纳 2015-04-17 20:46:08

解决方案1
2 已采纳 2015-04-17 20:46:08