coulissant d'un côté avec jquery (sans JQuery UI)

Question

Je veux faire specialist_pagecontent apparaître (diapositive) de la gauche, comme blindleftin de here mais je ne peux pas le faire fonctionner avec this. En fait, le plan est, au lieu de hide() idéal serait blindLeftOut('fast');hide(), et au lieu de show() j'ai besoin de show();blindLeftOut('slow'), mais comme je l'ai dit, je ne peux pas faire aveugle blindleftOut et blindLeftIn travailler pour moi.

Answer 1

Donnez aux éléments que vous souhaitez animer un viweport. Une couche à travers laquelle vous regardez pour voir les éléments à l'intérieur. Réglez ensuite la propriété overflow de cette viewport sur hidden et attribuez-lui une largeur/hauteur spécifique. De cette façon, vous pouvez animer les éléments dans le viewport afin qu'ils semblent glisser vers l'intérieur/l'extérieur.

Voici les changements que je ferais à votre JS:

//notice the use of the "active" class to save state 
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500); 
$('.specialist').click(function() { 
    //stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly 
    $('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500); 
    $('.selected-specialist').removeClass('selected-specialist'); 
    $(this).addClass('selected-specialist'); 
    $('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500); 
}); 

Et voici mes suggestions de modifications à la CSS:

.specialist_pagecontent { 
    position:absolute; 
    top:0; 
    left:-100%; 
} 
#specialist_lists { 
    float:left; 
    border: 1px solid #000000; 
    position:relative; 
    width:200px; 
    height:200px; 
    overflow:hidden; 
} 

Voici une démonstration: http://jsfiddle.net/Jwkw6/1/

Cela positionne absolument les éléments qui doivent être animés, ce qui est très utile car il supprime les éléments du flux régulier du document (ce qui signifie qu'il ne déclenchera pas des retraits de page entiers quand il anime). Cela crée également le viewport que j'ai mentionné, créant une fenêtre dans laquelle nous regardons pour voir les animations.

Answer 2

Je pense que la fonction animate de jQuery pourrait vous être utile. Ce que vous devez faire est d'avoir un div caché hors de la fenêtre ajouté à votre HTML (ou peut-être l'ajouter dynamiquement en utilisant jquery sur document.ready événement, si vous préférez) et l'utilisation de la fonction animée mentionnée ci-dessus pour le faire glisser et sortir et le lier à la fonction de clic de l'élément de menu.

travail Fiddle

Voici un JSFiddle travaille pour vous