6

リンクをクリックすると、div (いくつかの段落とテキストを含む) が削除され、別の div (いくつかの段落とテキストを含む) が挿入されるようにしようとしています。私はjQueryを使用してそれらをフェードインおよびフェードアウトしています。リンクをクリックすると、元の 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;

編集：

そのため、fadeTo を fadeOut に変更し、fadeOut の「slow」を「fast」に変更すると、うまく機能し、希望どおりに移行しました。ただし、「ホーム」をクリックすると、div が「ブロック」位置に移動され (左下隅に吐き出され)、コンテナーの中央の適切な場所に押し戻されます。これは、ホームをクリックし、他のsidenavリンクがない場合にのみ実行されます...これらはすべてまったく同じコードを実行しています（スイッチの場合、ホームは最初のものです）。何か案は？

4

4 に答える 4

1

fadeInの完了後に を開始する場合fadeToは、コールバック関数を使用する必要があります。また、不透明度を 0 にフェードしているので、次のように使用しますfadeOut。

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('slow', function() {

    // this code will begin once fadeTo has finished
    switch(linkClicked) {
        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;
    });
});
于 2013-06-03T02:34:30.293 に答える
0

あなたがやろうとしていることの私の理解から、私はあなたが単にこれを行う必要があると信じています:

$('#home-content').fadeIn('slow');

(fadeIn関数は自動的にdisplayプロパティをインライン/ブロックに設定します)

また、実装は正しいですが、実行する方が簡単です：

$('.content').fadeOut('slow');

(簡略化された jsFiddle )

于 2013-06-03T02:01:00.553 に答える
0

アニメーションが完了した後に実行されるように、fadeOut にコールバックを追加するだけです。

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('slow', function() {

    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;

    });
于 2013-06-03T02:54:34.927 に答える