Comment ajouter une transition de curseur à mon site Web avec jQuery?

Question

J'utilise la bibliothèque jQuery de manière à ce qu'elle soit disponible. Je dois savoir comment ajouter un effet de glissement à cette page:

http://qasim.x10.mx/iqbal/

Avis lorsque vous cliquez dessus, il se fane dedans et dehors, mais j'aimerais bien plutôt de glisser, j'ai une petite idée sur la façon dont ils fonctionnent mais, de la façon dont il est actuellement codé, mais pas sûr de la bonne technique à mettre en œuvre un. quel pourrait être le moyen le plus simple?

Merci beaucoup.

Answer 1

Si je comprends bien votre site, vous avez ce code qui fait la transition Affaiblissement:

$('nav ul li').not('#line').click(function(){ 
    selected = $(this).attr('id'); 
    $('nav ul li').css({'background': '', 'color': '#999'}); 
    $(this).css({'background': getColor(selected), 'color': '#FFF'}); 

    $('.content').fadeOut('fast', function(){ 
     $(this).html($('div#'+selected).html()); 
     $(this).fadeIn('fast'); 
    }) 

}) 

Si vous vouliez faire glisser, il serait probablement plus facile à utiliser l'interface utilisateur jQuery. Si vous voulez quelque chose comme glisser et se fanent vers la gauche, vous pouvez utiliser la transition baisse de jQuery UI pour accomplir ceci:

$('nav ul li').not('#line').click(function(){ 
    selected = $(this).attr('id'); 
    $('nav ul li').css({'background': '', 'color': '#999'}); 
    $(this).css({'background': getColor(selected), 'color': '#FFF'}); 

    $('.content').hide('drop', {direction: 'left'}, 'fast', function(){ 
     $(this).html($('div#'+selected).html()); 
     $(this).show('drop', {direction: 'right'}, 'fast'); 
    }) 

}) 

évidemment je n'ai pas essayé d'exécuter ce code exact sur votre site, mais ça va vraiment ressembler à ça.

Vous pouvez en savoir plus sur l'effet de chute ici:

• http://docs.jquery.com/UI/Effects/Drop
• http://jqueryui.com/demos/hide/ (cliquez goutte sur le menu déroulant)

Espérons que cela aide. :)