0

我正在尝试为菜单制作滚动效果。准确地说，我想点击一张图片，当我点击它时，菜单会向下滚动 1 并带有淡入淡出效果或下一个链接的效果。啊……如果你明白我的意思，就像风车轮子一样。:) 找不到任何信息。

这是我的代码：

    <div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
        <div class="menu">
    <a HREF="#">About me</a><BR>
    <a HREF="#">Portofolio</a><Br>
    <a HREF="#">Contact</a>
    </div>

http://jsfiddle.net/WCtQn/242/

因此，当我单击该箭头以将链接从上到下或从下到上移动时，没关系。

谢谢你。

4

2 回答 2

1

你可以试试这个方法。单击箭头时，它会重新排序列表元素

$('.img-fade').click(function() {
    var last = $('a')[0];
    last.remove();
    $('br')[0].remove();
    $('.menu').append("<br> " + last['outerHTML']);
});

您应该学习如何使用 javascript/jQuery 并向我们展示您到目前为止所尝试的内容以及您下次在此处发布时遇到的问题

如果你想要更高级的东西，你可以做一些类似于这个例子的事情，尽管我会添加一些.stop()s 来删除它有的一些错误

于 2013-07-31T18:23:51.807 回答
0

我不是 jQuery 专业人士，但我想出了一些与您正在寻找的东西接近的东西。我用淡化效果给它加了香料。我还删除了<br>标签并将链接设置为display: block;. 您可以将我所拥有的内容修改为类似于@Zeaklous 发布的内容，以将它们与元素一起删除并将它们重新添加。

http://jsfiddle.net/WCtQn/248/

$('.img-fade').on('click', 'img', function(){

      var firstItem = $('.menu a').first();
      firstItem.fadeOut(2000, function() {
           $(this).remove();
           $('.menu').append(firstItem);
           $('.menu a').last().fadeIn(2000);
      });

});
于 2013-07-31T18:27:22.273 回答