Эффект прокрутки при нажатии на изображение

Question

Я пытаюсь сделать эффект прокрутки в меню. Чтобы быть точным, я хочу щелкнуть по изображению, и когда я нажму на это меню, прокрутите вниз на 1 с эффектом затухания или каким-либо эффектом на следующую ссылку. Ahhh ... Как колесо ветряной мельницы, если я понимаю, что я имею в виду. :) И не удалось найти информацию.

Вот мой код:

<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/

Так что, когда я нажмите на эту стрелку, чтобы переместить ссылки сверху вниз или снизу вверх, dosen't материи.

спасибо.

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); 
     }); 

});