使用jQuery从右向左滑动DIV

问题描述：

我使用jQuery代码在负载上从左至右对div进行动画制作，然后通过单击关闭按钮div从右向左隐藏。它工作正常，它不会左右水平对角。我究竟做错了什么？这里是我使用的代码示例http://jsfiddle.net/N8NpE/2/使用jQuery从右向左滑动DIV

$(function(){ 
    $("#content-box").hide(0).delay(0).show(500); 
}); 

$(function(){ 
    $("#ClosePanel").click(function() { 
     $("#content-box").hide("slow"); 
    }); 
});

任何帮助将不胜感激。

答

你可以尝试使用的.animate()代替.hide()和.show()。这会让你对所有事情有更多的控制权。

$("#content-box").animate({'width': 240},500);

并关闭，包括回调函数动画后设置显示为none：

$("#content-box").animate({'width': 0},500,function(){ 
     $("#content-box").css('display','none'); 
});

http://jsfiddle.net/N8NpE/6/

所有公布的技巧都可以工作，但我更喜欢这一个，因为它可以提供更多的控制。唯一的一点是，它不会滑入，它只是显示出来，当它关闭时滑向右侧，但它挤压文本而不是实际滑动它。这里是我使用脚本的[link]（http://www.azurpanama.com/index.php?page=fullbg-test）。 –

您最初必须在CSS中将该元素的宽度指定为0，作为动画的起点。至于文本'挤压'，为了避免你必须在文本中使用固定宽度的包装，然后在内容框中设置'overflow：hidden;'（动画元素，而不是子元素与固定的宽度）。这样，内容框的宽度就会缩小，但内容将保持固定的宽度。 –

非常感谢布莱克，它效果很好。虽然有一个小问题。我需要在方框向右滑动之前添加5秒的延迟，所以我在代码'$（“＃content-box”）中添加了一个.delay（5000）。delay（5000）.animate（{'width'： 300}，1000）;”现在它首先显示文本，5秒后它消失并开始动画。 [这里是例子]（http://azurpanama.com/index.php?page=fullbg-test） –

答

你应该包括jQuery UI的在你的脚本，并更改您的功能一点点：

$(function(){ 
$("#content-box").hide(0).delay(0).toggle('slide', { 
     direction: 'left' 
    }, 1000); 
});

这里是一个更新的jsfiddle：http://jsfiddle.net/N8NpE/4/

由于马克西姆，该代码工作，是非常有益的埠我正在尝试将更少的脚本加载到页面中。但我一定会在其他项目中使用它。 –

答

$('#content-box').animate({width: 'toggle'});

http://jsfiddle.net/U7wGt/

与其他所有人一样，这一个也有效，但我试图减少使用加载代码。谢谢你的帮助约瑟夫。 –

使用jQuery从右向左滑动DIV

相关推荐