Jquery 在具有可变宽度的div上从右向左滑动。

我目前正努力使一个具有可变宽度的div从右向左滑动

问题是让按钮与滑动div一起设置动画，请参见下面的示例

注意-宽度是动态的，而不是静态的

---

提前感谢，

按照html的结构方式，您必须对动态div的宽度执行.animate（），并将宽度属性设置为负数，不管您将计数器div滑动到什么长度

.animate({width: -50})

在滑块调用之前或之后进行此调用

---

另一个建议是将按钮和计数器元素放在包装器元素中（这需要重新构造html），然后滑出包装器元素。

一个简单的解决方案是将动画应用到包装器div。因此，在slideRightShow中，您可以：

$('#caption').show();
$('#caption-wrap').show('slide', {direction: 'right'}, 1000);

---

。这并不像你想的那么简单。

这将是另一个解决方案：

HTML:

JS

---

嘿，布莱恩，谢谢你的帮助，我在jsfiddle中尝试了你的例子&可以让它工作（我可能遗漏了一些东西）。在控制台中查看，它输出“uncaughttypeerror:Object[Object Object]没有“on”（匿名函数）方法。明白了，我需要放在jQuery（文档）中。准备好了，开始工作了！再次感谢

<div class="test" id="hithere">Hi there, <a href="#" id="hide">Hide me</a></div>
<a href="#" id="show">Show me</a>

.test {
    border: 1px solid black;
    background-color: yellow;
    padding: 10px;
    position: absolute;
    visibility: hidden;
}

var variableWidth;

$(window).load(function() {

// gets complete element width (including margins), moves it out of the screen and sets visibility to its default
    variableWidth = $('#hithere').outerWidth(true);
    $('#hithere').css("left", variableWidth * -1);
    $('#hithere').css("visibility", "visible");
});

$("#show").click(function() {
    $('#hithere').animate({left: 0}, 400);
    });

$("#hide").click(function() {
        $('#hithere').animate({left: variableWidth * -1}, 400);
        });