가능 : Jquery 슬라이더에 애니메이션을 적용 하시겠습니까?

Question

jQuery에서 슬라이더를 움직일 수 있습니까? 그래서 버튼을 누르면 슬라이더의 안쪽이 느리게 움직여야하고 (예 : 300ms) 마우스 클릭과 슬라이드에 반응하지 않아야합니까?

$('#slider').sliderBar({ 
    start: 100, 
    onChange: function (val) { 
     var red = 0, 
      green = 0; 
     if (val >= 50) { 
      red = 255 - Math.round(((val - 50)/50) * 255); 
      green = 255; 
     } else { 
      red = 255; 
      green = Math.round(((val)/50) * 255); 

     } 
     $('.sliderBar-progress').css({ 
      background: "rgb(" + red + "," + green + ",0)" 
     }); 
    } 
}); 

$('button').on('click', function() { 
$('#slider').setsliderBar($('#slider').getsliderBar()-10, true); 
}); 

대단히 감사 : http://jsfiddle.net/gm4tG/5/

HTML :

<div id='slider' class='sliderBar'></div> 
<button>Remove 10%</button> 

CSS :

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#slider { 
    height:20px; 
    max-height:20px; 
} 
.sliderBar-progress { 
    background:rgb(0, 255, 0); 

} 

JS

이 코드입니다!

Answer 1

.sliderBar-progress { 
    background:rgb(0, 255, 0); 
    transition-duration: 5s; 
    -webkit-transition-duration: 5s; /* for Safari */ 
} 

이 속성은 Chrome, Firefox, Internet Explorer 10, Opera 및 Safari에서 지원됩니다.

Revised JSFiddle Here