0

大まかに言うと、リンクをクリックすると div がフェードアウトし、別の div がフェードインするようにしようとしています。画面の左下にある 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;

そのため、「場所」をクリックすると正常に動作しますが、「ホーム」をクリックすると奇妙な動作になります。何らかの理由で「インライン」表示プロパティを一時的に無視していると思いますか?

4

1 に答える 1

1

基本的に、フェードインとフェードアウトを同時に行いたい場合、css を display:inline として使用すると、一方がフェードアウトしようとしているときにもう一方がフェードアウトしようとしているため、この移動効果が得られます。戻ってくるので、ほんの一瞬同じ時間があります。

これを修正する方法は、次のいずれかを変更することです: a) css を変更して、2 つのボックスが互いに重なり合い、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-27T02:53:50.337 に答える