0

ページには、画像内のさまざまなレイヤーの不透明度をフェードアウト/インする複数の Jquery UI スライダーがあります。これはポートフォリオ用であるため、ページに読み込まれる別の .html ページに同じ div があり、div のコンテンツが新しいサムに関連するコンテンツに置き換えられます。スライダーは正常に動作しますが、新しいコンテンツを読み込んでも表示されません。

ここにページ リンクがあります。親指が一番上にあります。「レイヤリング」というセクションまで下にスクロールし、その下にある「単純化されたレイヤー モデルのデモンストレーション」をクリックすると、デモの開始をクリックすると、スライダーがアニメーション化されて見る。そのため、ページが最初に読み込まれて右下にスクロールすると、スライダーが表示されます。その後、上にスクロールして別のサムネイルを選択し、下にスクロールして同じことを行い、デモ アニメーションを表示しても表示されません。なぜこれが起こるのかわかりません。

http://www.klossal.com/portfolio/index_current.html

私が使用しているコードは次のとおりです。

JS

<script type="text/javascript">
$(document).ready(function() {
    //Step 1: set up the slider with some options. The valid values for opacity are 0 
to 1
    //Step 2: Bind an event so when you slide the slider and stop, the following     
function gets called
    $('#slider4').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#planet').css('opacity', ui.value)

         }                
    });
$('#slider3').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#nebula').css('opacity', ui.value)

         }                
    });
$('#slider2').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#light').css('opacity', ui.value)

         }                
    });
$('#slider1').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#starsimg').css('opacity', ui.value)

         }                
    });

});
</script>

CSS

#slider4 { width: 280px;}

#slider4 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider3 { width: 280px; }
#slider3 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider2 { width: 280px; }
#slider2 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider1 { width: 280px; }
#slider1 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }


.ui-widget-content { background: #373737;height:18px;border:0px solid #181818;border-    
color:#-webkit-box-shadow: inset 0px 0px 13px 2px #000000;
box-shadow: inset 0px 0px 13px 2px #000000; }

HTML

<DIV id="sliders_all" class="sliders_container" style="float:left;-webkit- 
transform:translate(308px, -5px);">
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider4" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"    
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider3" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0" 
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider2" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"  
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider1" data-wjs-element="box"></div>
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">
</DIV id="sliders_container">

この HTML 部分のコードは、新しいサムネイルをクリックしても同じままです。以前のコードは置き換えられているため、名前が互いに競合する心配はありません。戻っていくつかの ID 名を変更したところ、違いはないように見えました。

私がここで得ることができるどんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

0

私が間違っていたのは、スライダーのjavascriptを外部ページに追加する必要があったことです。javascriptはhtmlがロードされているページにすでにあるので少し混乱するかもしれませんが、どういうわけかそれを参照することができず、外部のものにも書き込む必要があります。

于 2012-05-21T18:17:08.173 に答える