Javascript 从右向左滑动

我正在尝试将面板从按钮的右侧滑动到左侧。这是我的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>

其中，pToolSlidePanel是在我的javascript文件中创建的HTMLElement，使用：

var pToolSlidePanel=document.createElement（“div”）

---

我也尝试了下面的教程，但我不断收到一个错误，指出HtmleElement没有css方法

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

对于类pToolSlidePanel使用

$（“.pToolSlidePanel”）

---

例如：idptoolsidepanel使用

$（“#ptoolsidepanel”）

编辑：在此处尝试此配置

我删除了一些CSS以使其更简单，但将其重新添加进去应该很简单

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

应该是

$（'.pToolSlidePanel'）。动画（{width:'toggle'}，2000）

---

另外，您将动画动作绑定到什么？jQuery是否包装在ready（）函数中，以便它知道DOM已完全加载？

是否要将元素从位置a（右）滑动到位置B（左）

HTML:

Javascript（jQuery）：

• 演示：

$（函数（）{
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'）。单击（函数（）{
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）；
旋转（侧）；
返回false；
});
变量旋转=函数（左）{
$slider.stop（真，真）。设置动画({
左：左撇子
}, 500);
}
});

---

有关完整代码，请查看演示示例的源代码。

好的，pToolSlidePanel已经是一个HTMLElement，所以我是否在它前面加上“.”并不重要。我已经使用：var pToolSlidePanel=document.createElement（“p”）…创建了pToolSlidePanel。jquery被包装在一个函数中，该函数加载到html文件中。我用一个工作示例更新了下面的答案。

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

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

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

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

        $(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);
            }
        });