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顯示暫時更改

回答

相關問題