我正在使用下面的 JQuery 代码添加和删除具有 display:none 属性的类,并将具有 display:block 的类添加到相对定位的三个不同 div。基本上,我有一个包含三个链接的侧导航,当单击这些链接时,我想在页面上显示不同的 div,一个淡出然后另一个淡入。
$(document).ready(function() {
$('#what-we-do, #location').hide();
$('#who-we-are').show();
});
$(function() {
$("#show-main-who").mousedown(function() {
$('#what-we-do, #location').fadeOut('fast',function(){
$(this).addClass('hide-info');
$(this).removeClass('show-info');
});
});
$('#show-main-who').mouseup(function() {
$('#who-we-are').fadeIn('fast',function(){
$(this).removeClass('hide-info');
$(this).addClass('show-info');
});
});
});
$(function() {
$("#show-main-what").mousedown(function() {
$('#who-we-are, #location').fadeOut('fast',function() {
$(this).addClass('hide-info');
$(this).removeClass('show-info');
});
});
$('#show-main-what').mouseup(function() {
$('#what-we-do').fadeIn('fast',function(){
$(this).removeClass('hide-info');
$(this).addClass('show-info');
});
});
});
$(function() {
$("#show-main-location").mousedown(function() {
$('#what-we-do, #who-we-are').fadeOut('fast',function(){
$(this).addClass('hide-info');
$(this).removeClass('show-info');
});
});
$('#show-main-location').mouseup(function() {
$('#location').fadeIn('fast',function(){
$(this).removeClass('hide-info');
$(this).addClass('show-info');
});
});
});
当您在http://jacobbuller.com/testsites/peacock/看到我的网站并使用侧面导航时,您可以看到 div 确实淡出,但另一个淡入的 div 会在它下方显示一会儿,然后移动到位。它使它看起来不稳定和不专业,知道如何解决这个问题而不必让 div 绝对定位吗?