Еще элегантнее
Код хтмл
<div id="header-r1">
<div id="left-r1">
<h1 id="title-r1">This course contains<br /> the following topics:</h1>
<hr id="line-r1" />
<div id="allList-r1">
<div id="playDiv-r1">
<span id="playSpan-r1"></span>
</div>
<ul id="lists-r1">
<li class="list-r1">Alcohol And Drugs</li>
<li class="list-r1">Becoming Familiar With Your Vehicle</li>
<li class="list-r1">Defensive Driving Techniques</li>
<li class="list-r1">Driving In Bad Weather</li>
<li class="list-r1">Driving Privileges</li>
<li class="list-r1">Laws And Rules Of The Road</li>
<li class="list-r1">Road Rage</li>
<li class="list-r1">Seat Belts</li>
<li class="list-r1">Sharing The Road</li>
<li class="list-r1">Signs, Signals, and Markings</li>
<li class="list-r1">Space Management</li>
</ul>
</div> <!-- end #allList-r1 -->
</div> <!-- end #left-r1 -->
<div id="right-r1">
<img src="images/img.jpg" height="400" width="540" />
</div> <!-- end right-r1-->
</div> <!-- end #header-r1 -->
Код js
jQuery(function()
{
$.pushCoords = function ()
{
var timeDelay = 800;
var timeSpeed = 1500;
var timeOpacity = 200;
var arrCoords = [];
$('.list-r1').each(function()
{
var obj = $(this).position();
var msg = obj.top;
arrCoords.push(msg);
})
$.each(arrCoords, function()
{
var coord = this;
var paddingLi = $(".list-r1").css("padding-top");
var paddingPlay = $('#playDiv-r1').css({top: paddingLi})
$('#playDiv-r1').animate({top: coord}, timeSpeed).delay(timeDelay);
//alert(coord);
})
$('#playDiv-r1').animate({opacity: "0"}, timeOpacity);
}
$.pushCoords()
});
Можно ли данное решение сделать еще ЭЛЕГАНТНЕЕ(как любят выражаться программисты) ?
Подскажите пожалуйста, как и почему
Спасибо |