Div coulissant de gauche à droite

J'ai un curseur qui fait glisser le contenu du haut vers le bas quand un lien/bouton est cliqué. Je veux qu'il glisse du côté droit du bouton et bouge de gauche à droite. Est-ce possible en ajustant simplement le code que j'ai déjà? Merci.Div coulissant de gauche à droite

HTML:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>jQuery Accordion Style DIV Menu</title> 
<link href="format.css" rel="stylesheet" type="text/css" /> 
<link href="text.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<script type="text/javascript" src="javascript.js"> </script> 
</head> 

<body> 
<div id="wrapper"> 

    <div class="accordionButton">Button 1 Content</div> 
    <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> 
    <div class="accordionButton">Button 2 Content</div> 
    <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> 
    <div class="accordionButton">Button 3 Content</div> 

    <div class="accordionContent">Content 1<br />Short Example</div> 
    <div class="accordionButton">Button 4 Content</div> 
    <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div> 
</div> 
</body> 
</html>

javascript.js:

$(document).ready(function() { 

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton').click(function() { 

    //REMOVE THE ON CLASS FROM ALL BUTTONS 
    $('.accordionButton').removeClass('on'); 

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
    $('.accordionContent').slideUp('normal'); 

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
    if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
    } 

}); 


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() { 
    $(this).addClass('over'); 

//ON MOUSEOUT REMOVE THE OVER CLASS 
}).mouseout(function() { 
     $(this).removeClass('over');          
}); 

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 


/******************************************************************************************************************** 
CLOSES ALL S ON PAGE LOAD 
********************************************************************************************************************/ 
$('.accordionContent').hide(); 

});

Source

2012-01-25 user1165861

peut-être ce lien peut aider http://www.learningjquery.com/2009/ 02/slides-elements-in-different-directions –

@ABCade Le problème avec cet exemple est que je ne suis pas sûr de savoir comment avoir le bouton à l'extérieur de la div ça marche toujours – user1165861

Non, et pour ce que vous êtes triyng à faire, je recommande un plug-in. Peut-être caroFredSel ou nivo: http://nivo.dev7studios.com/

Cela vous facilitera la vie.

Source

2012-01-25 18:59:22 Relic

Ce n'est pas tout à fait le slider que je cherchais. Assez essayer d'obtenir un curseur comme ce site a http://www.grano.hu/ – user1165861

Ceux seront plus faciles à éditer, que ce que vous avez ... Je peux vous aider avec ce que vous avez si vous le souhaitez, mais il faudra ajouter un tas de code pour gérer quelque chose que ces curseurs font déjà. – Relic

Ah je vois ok je vais essayer alors. MERCI! – user1165861

vérifier:

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

il explique glisse differents

Source

2012-01-25 19:04:52 MCSI

Ya-t-il vu cet exemple, mais est-il possible de déplacer le bouton à l'extérieur de la div et de le faire fonctionner? – user1165861

Ouais ce serait possible, il suffit de pouvoir référencer le bouton et le contenu glissant, que ce soit par rapport à un autre élément ou absolu par ID, par exemple. – c24w

@ c24w Je ne comprends pas vraiment désolé – user1165861

Utilisez ce,

$('.accordionButton').click(function() { 
    $(this).next().animate({width: 'toggle'}); 
    });

Source

2012-01-25 19:09:12 Rahul

Div coulissant de gauche à droite

Répondre

Questions connexes