0

高级别的，我试图做到这一点，当您单击一个链接时，一个 div 淡出，另一个淡入。但是，当您单击它最初设置的链接时，它会短暂（1 秒或更短）移动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”时它有奇怪的行为。我相信它出于某种原因暂时忽略了“内联”显示属性？

4

1 回答 1

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/

于 2013-06-27T02:53:50.337 回答