Question

我正在使用jQuery代码在加载时从左到右为div设置动画，然后通过单击关闭按钮，div从右到左隐藏。它工作正常，它不是水平向左，而是对角线。我究竟做错了什么？以下是我正在使用http://jsfiddle.net/N8NpE/2/

的代码示例

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

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

非常感谢任何帮助。

Answer 1

您可以尝试使用.animate()代替.hide()和.show()。这样可以让您更好地控制一切。

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

要关闭，请包含一个回调函数，以在动画后将显示设置为无：

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

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

Answer 2

您应该在脚本中包含jQuery UI并稍微更改一下您的功能：

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

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

Answer 3

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

http://jsfiddle.net/U7wGt/

使用jQuery从右到左滑动DIV

3 个答案: