使用jquery按位置滑动图像

时间:2010-12-10 10:34:55

标签: jquery

我试图让图像滑动到点击的相应li上的中心位置。因此,例如,如果我点击列表中的数字2,它将滑动到数字2.问题是知道用户下次点击的位置,如何计算当前位置以及滑动的方向。

这是我的HTML

<ul id="llist">
                    <li class="t current"><a href="#"><span>solutions</span></a><img src="images/bg-tab-leader-arrow.png" width="24" height="53" title="pointer" class="pointer" /></li>
                    <li class="m"><a href="#"><span>credit mangement solutions</span></a></li>
                    <li class="b"><a href="#"><span>third party additions</span></a></li>
                </ul>

到目前为止,这是我的jquery:

$('#leader #llist li').click(function() { 
        $('.pointer').animate({'top':'+=61px'},1000,function() { 
            $(this).removeClass('current'); 
    });
    }, function() { 
        $('.pointer').animate({'top':'-=61px'},1000);   
        $(this).addClass('current');
    });

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

想法是使用点击的li的位置,在操作中查看它here

$('li')
    .click(function() {
        var thisTop = $(this).offset().top;
        $('.pointer').animate( {'top': thisTop} );
    });