divのページの負荷を隠す

Question

ページが読み込まれたときに2つのdiv要素をjqueryで非表示にできない理由を理解しようとしています。 2つのボタンのうちの1つが押されたとき、関連するdivを表示したい。これはうまく動作しますが、いずれかのボタンを押す前にそれらを非表示にすることはできません。

私は$('.gauge1').hide();をコードの先頭に置こうとしましたが、divの出現を停止します。私fiddle here

$(document).ready(function() { 
 

 
    //How to ihide them both on page load? 
 

 

 

 
    $("#button1").on("click", function() { 
 
    $('.gauge1').fadeIn(); 
 
    $('.gauge2').hide(); 
 
    }); 
 

 
    $("#button2").on("click", function() { 
 
    $('.gauge2').fadeIn(); 
 
    $('.gauge1').hide(); 
 
    }); 
 

 

 
    var d = new JustGage({ 
 
    id: "gauge1", 
 
    value: 67, 
 
    min: 0, 
 
    max: 100, 
 
    title: "Visitors" 
 
    }); 
 
    var b = new JustGage({ 
 
    id: "gauge2", 
 
    value: 91, 
 
    min: 0, 
 
    max: 100, 
 
    title: "Visitors" 
 
    }); 
 
});

<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script> 
 
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script> 
 

 
<h2> 
 
Choose Gage 
 
</h2> 
 

 
<button id="button1">Gauge 1</button> 
 
<button id="button2">Gauge 2</button> 
 
<div class="gauge1"> 
 
    <h2> 
 
Gauge 1 
 
</h2> 
 
    <div id="gauge1" class="200x160px"></div> 
 
</div> 
 
<div class="gauge2"> 
 
    <h2> 
 
Gauge 2 
 
</h2> 
 
    <div id="gauge2" class="200x160px"></div> 
 
</div>

Answer 1

プラグインは、実際にゲージのものをやってみると、それはロードを参照してください。だから、最初は隠されていても、これは起こりません。

$(document).ready(function() { 

    $("#button1").on("click" , function() { 
    $('.gauge1').fadeIn(); 
    $('.gauge2').hide(); 
    }) ; 

    $("#button2").on("click" , function() { 
    $('.gauge2').fadeIn(); 
    $('.gauge1').hide(); 
    }) ; 


    var d = new JustGage({ 
    id: "gauge1", 
    value: 67, 
    min: 0, 
    max: 100, 
    title: "Visitors" 
    }); 
    var b = new JustGage({ 
    id: "gauge2", 
    value: 91, 
    min: 0, 
    max: 100, 
    title: "Visitors" 
    }); 

    // Add the hide script after the gauges have been drawn. 
    $('.gauge1, .gauge2').hide(); 

}) ; 

ワーキングフィドル：あなたがそれらを表示することができ、プラグインがそのビットをした後、プラグインは、ゲージを引かれた後、それはvisibilityまたはちょうど.hide()ゲージを使用して非表示にする方が良いhttps://jsfiddle.net/q3ysrwfm/

Answer 2

ゲージが初期化される前にゲージを隠そうとしています。すなわち

$(document).ready(function() { 

var d = new JustGage({ 
    id: "gauge1", 
    value: 67, 
    min: 0, 
    max: 100, 
    title: "Visitors" 
    }); 
    var b = new JustGage({ 
    id: "gauge2", 
    value: 91, 
    min: 0, 
    max: 100, 
    title: "Visitors" 
    }); 

$('.gauge1, .gauge2').hide(); 

    $("#button1").on("click" , function() { 
    $('.gauge1').fadeIn(); 
    $('.gauge2').hide(); 
    }) ; 

    $("#button2").on("click" , function() { 
    $('.gauge2').fadeIn(); 
    $('.gauge1').hide(); 
    }) ; 

    }) ;