Плавное появление картинки в ui slider - jQuery
здравствуйте. делаю слайдер с помощью плагина ui slider
подскажите, пожалуйста, как сделать, чтобы картинки плавно появлялись при прокручивании скролла. также нужно, чтобы текстовая информация менялась при прокручивании скролла. адрес слайдера http://vash-sayt.ru/dbr/ $(function() { var slider = $('#slider'); slider.slider({ 'animate': "slow", 'min': 0, 'max': 6, slide: function( event, ui ) { var index = ui.value; $('#tree').attr('src', 'images/slider/'+(index+1)+'.png'); $('#tree2').attr('src', 'images/slider/tum/'+(index+1)+'.png'); $('#tree2').attr('class', 't'+(index+1)); $('#tree3').attr('class', 'd'+(index+1)); } }); $('.trees').click(function(){ slider.slider('value', slider.slider('value') + 1); return false; }); $('.trees2').click(function(){ slider.slider('value', slider.slider('value') + 1); return false; }); $('.trees3').click(function(){ slider.slider('value', slider.slider('value') + 1); return false; }); }); <div class="trees2"> <img class="t1" id="tree2" src="images/slider/tum/1.png" alt="" /> <img class="t1" src="images/slider/tum/1.png" style="display: none;" /> <img class="t2" src="images/slider/tum/2.png" style="display: none;"/> <img class="t3" src="images/slider/tum/3.png" style="display: none;"/> <img class="t4" src="images/slider/tum/4.png" style="display: none;"/> <img class="t5" src="images/slider/tum/5.png" style="display: none;"/> <img class="t6" src="images/slider/tum/6.png" style="display: none;"/> <img class="t7" src="images/slider/tum/7.png" style="display: none;"/> </div> <div id="slider"></div> <div class="trees3"> <p class="d1" id="tree3">1 сентября</p> <p class="d1">1 сентября</p> <p class="d2">6 ноября</p> <p class="d3">9 декабря</p> <p class="d4">11 января</p> <p class="d5">4 февраля</p> <p class="d6">23 октября</p> <p class="d7">21 марта</p> </div> |
Часовой пояс GMT +3, время: 01:53. |