Question

我正在尝试对菜单进行滚动效果。确切地说，我想点击一个图像，当我点击它时，菜单向下滚动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/

因此，当我点击该箭头将链接从上到下或从下到上移动时，无关紧要。

谢谢。

Answer 1

您可以尝试this method。单击箭头时，它会重新排序列表元素

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

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

如果你想要更高级的东西，你可以寻找与this example类似的东西，虽然我添加了一些.stop()来删除它有的错误

Answer 2

我不是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);
      });

});

单击图像时的滚动效果

2 个答案: