rotación circular menú / de aumento con jQuery

Question

Estoy tratando de hacer un menú que contiene 5 elementos / iconos con el seleccionado de estar en el centro. Al hacer clic a la izquierda oa la derecha de este icono centrada, gira el menú de la izquierda o la derecha, envolver alrededor de los bordes y en movimiento lo que fue elemento más cercano a la parte trasera a través de la opuesta. Al hacer clic en el elemento de centrado se llegará a la URL enlazada.

El menú también debería ampliar de una manera similar al muelle OS X, excepto los niveles de ampliación se establecen basándose en posición de no pasar el ratón.

He hecho un diagrama que es fácil de entender que mis divagaciones.

_{(fuente: yfrog.com )}

Me las he arreglado para improvisar una sencilla versión de jQuery, donde los elementos intercambian posiciones, según sea necesario, pero no puedo encontrar la manera de animar este movimiento, especialmente la envoltura alrededor de la parte bordes, y cambiar el tamaño basado en la posición.

Estoy adivinando mi código no es probablemente el mejor momento:)

El HTML es el siguiente:

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

Y la 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 los elementos están .navblock positionned absolutamente. Los #leftnav y #rightnav elementos también y tienen un mayor índice z de modo flotar por encima de los artículos / iconos.

He mirado en varios plugins jQuery pero ninguno parece cerca de lo que necesito.

Answer 1

En lugar de cambiar los atributos id (que realmente no debería hacer en primer lugar) que se pueden cambiar las clases CSS y utilizar el método switchClass() de jQuery UI para animar la rotación.

También tendría que hacer un poco de clone()ing a hacer que parezca que los bordes navblocks han girado en torno al otro lado del widget y algunos queue() / dequeue()ing para manejar varios clics.

Demostración

Trabajo:

http://jsbin.com/ovemu (editable vía http://jsbin.com/ovemu/edit )

Fuente completo:

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

En lugar de hacer esto por sí mismo y perder el tiempo en conseguir que esto funcione correctamente le sugiero que utilice las soluciones existentes. Aquí algunas sugerencias (supongo que muchos más se pueden encontrar mediante el uso de Google

jQuery: Mac-como Muelle

icono del Dock de Mac-como (v2)

MAC CSS Muelle Menú

jQuery imitando el OS X muelle

simple muelle de OSX-como con jQuery

iconDock jQuery Plugin

Answer 3

Usted parece estar en el camino correcto. Una cuestión es que esta línea

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

Deben usar las 8 de la substr:

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