rotativo circular / ampliação menu com jquery

Question

Eu estou tentando fazer um menu que contém 5 itens / ícones com o selecionado de estar no centro. Clicando à esquerda ou à direita deste ícone centrado, gira o menu a esquerda ou direita, o acondicionamento em torno das bordas e em movimento qualquer artigo era mais próximo da borda traseira no meio do oposto. Clicando no item centrada leva você para a sua URL associada.

O menu também deve ampliar de forma semelhante à doca OS X, exceto os níveis de ampliação são definidos com base na posição não mouseover.

Eu fiz um diagrama que é mais fácil de entender do que minhas divagações.

_{(fonte: yfrog.com )}

Eu consegui juntos remendar uma versão jQuery simples, onde os itens trocar posições, conforme necessário, mas não consigo descobrir como animar o movimento, especialmente o envoltório em torno da parte bordas, e mude o tamanho com base na posição.

Eu estou supondo que meu código não o melhor é provavelmente quer:)

O HTML é a seguinte:

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="navblock1" class="navblock">
    one
</div>
<div id="navblock2" class="navblock">
    two
</div>
<div id="navblock3" class="navblock">
    three
</div>
<div id="navblock4" class="navblock">
    four
</div>
<div id="navblock5" class="navblock">
    five
</div>

E o JS:

function rotateNav(direction) {
var change = (direction=='left')?(-1):(+1);
$('div.navblock').each(function() {
    oldPos = parseInt($(this).attr('id').substr(9));
    newPos = oldPos+change;
    if (newPos == 0)
        newPos = 5;
    else if (newPos == 6)
        newPos = 1;
    $(this).attr('id','navblock'+newPos);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
    rotateNav('right');
});
$("#rightnav").click(function() {
    rotateNav('left');
});

});

Todos os elementos .navblock são absolutamente positionned. Os elementos #leftnav e #rightnav também e eles têm um índice z superior para flutuar sobre os itens / ícones.

Eu olhei vários plugins jQuery, mas nenhum parece perto do que eu preciso.

Answer 1

Em vez de mudar atributos id (que você realmente não deve fazer em primeiro lugar) você pode mudar classes CSS e usar método switchClass() do jQuery UI para animar a rotação.

Você também teria que fazer um pouco de clone()ing para fazer parecer que os navblocks ponta têm girado ao redor para o outro lado do widget e alguns queue() / dequeue()ing de lidar com vários cliques.

Demonstração de Trabalho:

http://jsbin.com/ovemu (editável via http://jsbin.com/ovemu/edit )

Fonte completa:

JavaScript

function rotateNav(direction) {
if (direction === 'left') {
  var change = 1;
  $('.navblock5').clone()
    .removeClass('navblock5')
    .addClass('navblock0')
    .appendTo('#nav');
}
else {
  var change = -1;
  $('.navblock1').clone()
    .removeClass('navblock1')
    .addClass('navblock6')
    .appendTo('#nav');
}

$('div.navblock').each(function() {
  var oldClassName = this.className.split(' ')[1],
    oldPos = parseInt(oldClassName.substr(8)),
    newPos = oldPos + change;

    $(this).switchClass(
      oldClassName,
      'navblock'+newPos,
      'fast', 
      function () { 
        var animated = $('.navblock:animated').length;
        if (newPos === 6 || newPos === 0) {
          $(this).remove(); 
        } 
        if (animated === 1) {
          $('#nav').dequeue();
        }
      }
    );
});
}

$(document).ready(function(){
$("#leftnav").click(function() {
  $('#nav').queue(function(){rotateNav('right');});
});
$("#rightnav").click(function() {
  $('#nav').queue(function(){rotateNav('left');});
});
});

CSS

#nav { 
  width: 580px; height: 120px; 
  position: relative; left: 150px; 
  overflow: hidden; 
}

.navblock { 
  height: 100px; width: 100px; 
  position: absolute; top: 10px; z-index: 50;
  background-color: grey;
}
.navblock0 { left: -110px; }
.navblock1 { left: 10px; }
.navblock2 { left: 120px; }
.navblock3 { left: 230px; width: 120px; height: 120px; top: 0;}
.navblock4 { left: 360px; }
.navblock5 { left: 470px; }
.navblock6 { left: 590px; }

#leftnav, #rightnav { 
  position: absolute; z-index: 100; height: 120px; width: 228px;
}
#leftnav { left: 0; }
#rightnav { right: 0; }

/*Uncomment the following to help debug or see the inner workings */
/*
#nav { border: 1px solid green; overflow: visible; }
#leftnav, #rightnav { border: 1px solid blue; }
*/

HTML

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>

<div class="navblock navblock1">one</div>
<div class="navblock navblock2">two</div>
<div class="navblock navblock3">three</div>
<div class="navblock navblock4">four</div>
<div class="navblock navblock5">five</div>

Answer 2

Em vez de fazer isso sozinho e perder tempo em começar isso funcione corretamente eu sugiro que você use soluções já existentes. Aqui alguns ponteiros (eu acho que muitos mais podem ser encontrados usando google

jQuery: Mac-like Doca

Mac-like ícone de encaixe (v2)

menu MAC CSS Doca

jQuery imitação o oS X doca

simples OSX-like doca com jQuery

iconDock jQuery Plugin

Answer 3

Você parece estar no caminho certo. Uma questão é que esta linha

oldPos = parseInt($(this).attr('id').substr(9));

Devem usar 8 no substr:

oldPos = parseInt($(this).attr('id').substr(8));