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作为显示：内联你会得到这个移动效果，因为一个人试图淡出而另一个回来了，所以他们有相同的时间只有一秒钟。

解决这个问题的方法是改变： a）改变你的css，使两个盒子在彼此的顶部，绝对定位为z-index

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

CSS显示暂时改变

1 个答案: