1

CodeAcademy を使用して JQuery を学習中です。jquery が HTML 要素にエフェクトを作成するとき、具体的にはfadeOutと言うと、ページから HTML 要素を削除しますか? それとも、ある種のデータ構造にプッシュしますか?

質問の理由は、(私の以下のコードで) ボタンがフェードアウトすると、隣接するボタンが配置されることに気付きました。後でフェードインするので、要素はどこかに存在する必要があります。では、JQUERY は正確にはどのように機能するのでしょうか。

HTMLも初心者なのでよろしくお願いします。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Vanishing Act</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id="blue"></div>
        <div></div>
        <div></div>
        <div></div>
        <br/><button>Click Me!</button>
    </body>
</html>

CSS

div {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px; }

#blue {
    background-color: #A7DBD8; }

脚本

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeOut('slow');
            $('button').click(function(){
               $('#blue').fadeIn('slow');
            });
    });
});
4

8 に答える 8

1

DOMからは削除されません。要素の不透明度の値は、0まで定期的に変更/削減され、要素のCSSdisplayプロパティがに変更されnoneます。要素が上下に移動しないようにするには、要素にカスタムアニメーションを使用して、不透明度の値のみを変更します。

また、fadeIn、fadeOutはCSSの可視性プロパティを変更しません。CSS不透明度プロパティを変更した後、CSS表示プロパティを変更します。

visibilityCSSプロパティとCSSプロパティの違いを説明するために、displayこのリンクに面白い例があります：http ://www.kavoir.com/2009/02/css-difference-between-opacity0-visibilityhidden-and-displaynone.html

于 2013-01-23T11:26:53.200 に答える
0

firebugを使用して要素を確認すると、 display:noneフェードアウト時にスタイルが div に追加され、フェードイン時にスタイルが適用されることに気付く場合があります。display:inlinestyle

このコードを次のように使用できます

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeToggle('slow');

    });
});
于 2013-01-23T11:01:28.483 に答える
0

jQuery はdisplay: none、要素を非表示にし、UI から削除するものを使用します。

fadeOut は、このアニメーションのショートカットです (jQuery ソースから):

fadeOut: { opacity: "hide" },
于 2013-01-23T11:01:41.130 に答える
0

jQueryを使用しない限りremove()、要素は DOM (「HTML ページ」) から削除されません! jQuery は CSS (「スタイリング」) を多用します。つまり、要素の属性が変更されます。

fadeOut()「のみ」は効果の最後の可視性を「非表示」に設定しますが、要素は技術的にはまだそこにありますが、もう表示されません。

技術的には、jQuery はdisplay属性を使用し、それを に設定しnoneます。しかし、理解を深めるために「可視性」で説明しました。

于 2013-01-23T11:02:30.160 に答える
0

クロムなどで開発者ツールを開くと、基本的にフェードアウトした要素の不透明度が一定期間にわたって0に減少し、表示値が「なし」に設定されていることがわかります。

前：

<p>
  If you click on this paragraph
  you'll see it just fade away.
  </p>

その間：

<p style="opacity: 0.4566767676767;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>

後：

<p style="display: none;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>
于 2013-01-23T11:02:55.383 に答える
0

フェードアウト時に、jquery は表示スタイルを以前のもの (おそらくインライン ブロック) から none に変更するだけです。

style="dislplay:inline-block"

に

style="display:none"

要素は非表示になります。

フェードインでも同じことが起こりますが、jquery はフェードアウトする前に表示値を変数に格納します。その変数を使用すると、フェードイン時の表示スタイルを取得できます。

于 2013-01-23T11:04:39.743 に答える
0

FadeOut と FadeIn は要素の CSS 'display' 属性を変更しますが、要素はページにまだ存在しています。

Chrome を使用している場合は、ページの最初の四角形を右クリックし、[要素の検査] をクリックします。ページの下部にマークアップ コードが表示されます。ボタンをクリックすると、スタイルがリアルタイムで変化するのを確認できます。

于 2013-01-23T11:04:45.433 に答える