顯示默認值時，jQuery的UISlider負載

Question

JSFIDDLE DEMO

我無法弄清楚如何去這樣做以下這些：

1. 顯示負載的默認項。目前，它只會加載一個空白頁面，並只在拖動滑塊時才顯示數據。
2. 加載項目時顯示淡化效果。

這裏的HTML

<div class="sli3"></div> 
<div class="div-0"> 
    <div class="div-1"></div> 
    <div class="div-2"></div> 
    <div class="div-3"></div> 
</div> 

CSS：

.div-0 { 
    position: relative; 
} 
.div-1 { 
    position:absolute; 
    top:150px; 
    left:150px; 
} 
.div-2 { 
    position:absolute; 
    top:100px; 
    left:60px; 
} 
.div-3 { 
    position:absolute; 
    top:210px; 
    left:260px; 
} 

JS：

$(function() { 
    $(".sli3").slider({ 
      animate: true, 
     range: "min", 
     value: 10, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      if (ui.value<=20) { 
       $(".div-1").text("whatever"); 
       $(".div-2").html("hello <strong>world</strong>"); 
       $(".div-3").text(""); 
      } 
      else if (ui.value>=21 && ui.value<50) { 
       $(".div-1").text("yay"); 
       $(".div-2").text("whoo"); 
       $(".div-3").text(""); 
      } 
      else if (ui.value>=50 && ui.value<70) { 
       $(".div-1").text("star"); 
       $(".div-2").text("wars"); 
       $(".div-3").text(""); 
      } 
      else if (ui.value>=70 && ui.value<90) { 
       $(".div-1").text("night"); 
       $(".div-2").text("crawler"); 
       $(".div-3").text("rocks"); 
      } 
      else { 
       $(".div-1").text("example text 1"); 
       $(".div-2").text("example text 2"); 
       $(".div-3").text(""); 
      } 
     } 
    }); 
}); 

我如何去這樣做呢？

Answer 1

改變了代碼的位：

$(function() { 
    $(".sli3").slider({ 
     animate: true, 
     range: "min", 
     min: 0, 
     max: 100, 
     slide: onSlide, 
     change: onSlide 
    }).slider('value', 10); 
}); 

（我把slide功能了，所以我可以把它都在變化和幻燈片）。

檢查更新到您的演示：
https://jsfiddle.net/m7uhdsy9/1/