从div上以可变宽度从右向左滑动。

问题描述：

我目前正在努力得到一个可变宽度div从右向左滑出。从div上以可变宽度从右向左滑动。

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

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

说明 - 宽度是动态的，不是一成不变的。

在此先感谢，

答

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

嘿布赖恩感谢您的帮助，我tryed的例子jsfiddle＆可以得到它的工作（我很可能我错过了一些东西）。看看控制台，它输出'未命中TypeError：对象[对象对象]没有方法'on'（匿名函数）'。 – Cam

明白了，我需要在jQuery（document）.ready中放置一个魅力！再次感谢 – Cam

答

有了你有你的HTML结构，你将不得不做.animate（）上的动态div的宽度和宽度属性设置为负任何长度你滑动您的计数器的方式格到

.animate({width: -50})

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

另一个建议是将按钮和计数器元素放在一个包装元素中（这将需要重新构造你的html）并且只是滑出该包装元素。

答

一个简单的解决方案是将动画应用到包装div。所以在你的幻灯片展示中，你可以有：

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

答

这将是另一种解决方案：

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

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上以可变宽度从右向左滑动。

相关推荐