CSS显示暂时更改

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

下面是一些相关的代码：

$(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;

所以，当我点击“这里”它工作正常，但是当我点击“家”它有怪异的行为。我相信它由于某种原因暂时忽略了“内联”显示属性？

来源

2013-06-27 Alex Schiff

如果“在哪里”的作品，但“家”并不那么问题必须与CSS或HTML，因为代码是相同的。请发布相关的CSS和HTML。 –

我的猜测是这个问题与页面元素的格式有关。请张贴代码...并创建一个jsfiddle。 –

你可以发布你的html吗？ – Reina

我现在可以看到你的问题了，基本上如果你想淡入一个，并在同一时间淡出一个，你有他们的CSS显示：内联你会得到这个移动的效果，因为一个正试图淡出而另一个回来，所以他们在同一时间只有几分之一秒。

解决这个问题的办法是要么改变：一）改变你的CSS这样两个盒子上相互绝对定位Z-指标

或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/

来源

2013-06-27 02:53:50 Reina

我实际上找到了一个替代解决方案，它是在淡入淡出效果之后和切换案例之前设置Timeout。尽管如此，这也会起作用！ –

CSS显示暂时更改

回答

相关问题