Glissement de droite à gauche

Question

J'essaie de faire glisser un panneau depuis la droite du bouton vers la gauche. Voici mon css:

style.css:

.pToolContainer { 
    position : absolute; 
    right: 0; 
} 
.btn-pTool{ 
    //display:block; 
    position:absolute; 
    right: 0; 
    margin:0; 
    padding:0; 
    background-image: url(slide_button.png); 
    background-repeat:no-repeat; 
} 
.btn-pToolName{ 
    text-align: center; 
    width: 26px; 
    height: 190px; 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 1em; 
    line-height: 32px; 
} 
.pToolSlidePanel{ 
    min-height: 185px; 
    min-width: 185px; /*WIDTH OF HIDDEN SLIDE PANEL*/ 
    display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/ 
    border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/ 
    border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/ 
    border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/ 
    border-left-style: solid; /*MAKES LEFT BORDER SOLID*/ 
    border-right-color: #626262; /*RIGHT BORDER COLOR*/ 
    border-left-color: #626262; /*LEFT BORDER COLOR*/ 
    background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/ 
    border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/ 
    border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/ 
    border-bottom-color: #626262; 
    border-top-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/ 
    border-top-style: solid; /*MAKES BOTTOM BORDER SOLID*/ 
    border-top-color: #626262; /*BOTTOM BORDER COLOR*/ 
    opacity: .8; /*SETS SLIDE PANEL BACKGROUND'S OPACITY TO 80%*/ 
    margin: auto; /*CENTERS OUR SLIDE PANEL*/ 
    position: fixed; 
    //bottom: 50px; 
    overflow:hidden; 
} 

test.html:

<div class="pToolContainer"> 
    <span class="btn-pTool"> 
     <a class="btn-pToolName" href="#"></a> 
    </span> 
    <div class="pToolSlidePanel"></div> 
</div> 

J'ai essayé la déclaration jquery suivante, mais il ne semble pas fonctionner:

$(pToolSlidePanel).animate({width:'toggle'},2000); 

où pToolSlidePanel est le HTMLElement créé dans mon fichier javascript en utilisant:

var pToolSlidePanel = document.createElement ("div");

J'ai aussi essayé le tutoriel suivant http://www.learningjquery.com/2009/02/slide-elements-in-different-directions mais je continue à recevoir une erreur indiquant que HTMLElement ne dispose pas d'une méthode css

Answer 1

Essayez cette

$(".pToolSlidePanel").animate({width:'toggle'},2000); 

Pour la classe pToolSlidePanel utilisation $(".pToolSlidePanel")

et Par exemple: id pToolSlidePanel utilisation $("#pToolSlidePanel")

Answer 2

Edit:. Essayez cette configuration icihttp://jsfiddle.net/TQZh5/50/

j'ai enlevé une partie de la CSS pour le rendre plus facile, mais il devrait être trivial d'ajouter le dans

$(pToolSlidePanel).animate({width:'toggle'},2000); 

Si être

$('.pToolSlidePanel').animate({width:'toggle'},2000);

En outre, à quoi liez-vous l'action animée? Le jQuery est-il enveloppé dans la fonction ready() pour qu'il sache que le DOM est complètement chargé?

Answer 3

Voulez-vous faire glisser un élément de la position A (droite) à B (gauche)?

HTML:

<div class="pToolContainer"> 
    <div class="pToolSlidePanel"> 
    </div> 
</div> 

CSS:

.pToolContainer { 
    width:400px; 
    height:100px; 
    background-color:#ccc; 
    position:relative; 
} 
.pToolSlidePanel 
{ 
    position:absolute; 
    right:0; 
    top:0; 
    width:100px; 
    height:100px; 
    background-color:#ffcc33; 
} 

Javascript (jQuery):

$('.pToolSlidePanel').animate({ 
    left: '-=200' 
    }, 2000); 

Answer 4

• DEMO:http://so.devilmaycode.it/sliding-from-right-to-left/

 $(function() { 
      var iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = parseInt(liW * $slider.find('li').length); 
      $slider.css('width', liFW + 'px'); 
      $('.button a').click(function() { 
       var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left')); 
       var side = (this.id == 'right') ? (((left + (liW * iXS)) == liFW) ? 0 : -(left + liW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liW) : 0); 
       rotate(side); 
       return false; 
      }); 
      var rotate = function(leftY) { 
       $slider.stop(true, true).animate({ 
        left : leftY 
       }, 500); 
      } 
     }); 

pour regard plein de code au code source de l'exemple de démonstration.