Question

我正在努力让一个可变宽度的div从右向左滑动。

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

http://camoconnell.com/things/slideoutleft/

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

提前感谢，

Answer 1

Here's a working example。它并不像你想象的那么简单。

Answer 2

按照你的html结构的方式，你必须在动态div的宽度上做一个.animate（），并将width属性设置为负的你将计数器div滑动到的任何长度

.animate({width: -50})

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

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

Answer 3

一个简单的解决方案是将动画应用于包装器div。所以在你的slideRightShow中，你可以拥有：

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

Answer 4

这将是另一种解决方案：

HTML：

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

CSS：

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

JS

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

在div上从右向左滑出，宽度可变。

4 个答案: