javascript - CSS显示暂时改变

Question

高级别，我试图做到这一点，当你点击一个链接时，一个 div 淡出而另一个淡入。但是，当你点击它最初设置的链接时，它会短暂地(1 秒或less) 将 div 移动到屏幕的左下角，然后回到原位。这只会发生在单击将返回到默认位置的链接时。

这里是一些相关的代码:

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('fast')


    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;

        case 'where':
            console.log("linkClicked = "+linkClicked);
            $('#where-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
            });
            break;

因此，当我单击“where”时它工作正常，但是当我单击“home”时它有奇怪的行为。我相信它出于某种原因暂时忽略了“内联”显示属性？

Answer 1

我现在可以看到你的问题了，基本上如果你想同时淡入和淡出一个并且你有他们的 css 作为 display:inline 你会得到这个移动的效果，因为一个试图淡出而同时另一个回来了，所以他们在同一时间出现了几分之一秒。

解决这个问题的方法是改变: a) 更改您的 css，使两个框彼此重叠并使用 z-indexes 绝对定位

或 b) 改变它，使第一个只是隐藏自己而不是像下面那样淡出:

$(document).ready(function() {
  $('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').hide();
    switch(linkClicked) {
        case 'home': 
            $('#home-content').fadeIn('slow');
            break;
        case 'where':
            $('#where-content').fadeIn('slow');
            break;
    }   
  });
});

jsFiddle 在这里:http://jsfiddle.net/MuA3L/