个人中心
gpt4 book ai didi

javascript - 单击按钮时，div 跳出位置

转载 作者：行者123 更新时间：2023-11-30 16:56:05 25 4
gpt4 key购买 nike

问题

当我单击季后赛或常规按钮时，包含内容 players-list 和 players-regular 的 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>

基础.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%;
}

最佳答案

发生这种情况是因为在淡入开始时淡出尚未完成。您最终会在短时间内看到两个 div，当 fadeOut 完成时，第一个 div 被隐藏，您会看到跳跃。

这样的事情怎么样:

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

这样，只有当第一个 div 完全隐藏时，第二个 div 才会显示。另外，稍微减少动画持续时间，这样可以提供更好的用户体验；)。

关于javascript - 单击按钮时，div 跳出位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29707878/

25 4 0
文章推荐： javascript - console.log 中显示 undefined 的错误变量
文章推荐： c# - 如何使用选择框扩展身份用户属性
文章推荐： c# - 如何在 C# 中使用 Skype4COM API 获取焦点组名称
文章推荐： javascript - Ember.js 中的 Bind-attr "for"属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com