问题
当我单击季后赛或常规按钮时，包含内容 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/