jquery UI折叠效果如何反转方向？

Question

我在切换时使用 jquery UI 折叠效果作为参数，如下所示：

$(textDivChild).toggle( "fold");

效果很好，我只有一个问题。 div 从右到左折叠而不是从左到右折叠，这就是我想要的。而且我在选项对象中看不到方向选项...我尝试了各种其他方法，例如slide，slideUp（在jquery核心中）和slideDown，但它们都没有做我想要的。如果幻灯片有一个“向左”滑动的方向选项，而不仅仅是“向上”，我可以使用它。我的最终目标是让容器看起来像是在折叠/展开到按钮中/从按钮中出来——如果我可以反转方向，折叠将非常有用。

另外，我尝试将 div 与相对/绝对定位右对齐，但它对方向没有影响。无论如何我都无法做到这一点，因为我无法定位正确，因为我在顶部执行此操作的应用程序如何工作......无论如何我只能使用“左”和“顶部”CSS定位。

Answer 1

使用 CSS，您可以使用 float 属性使其成为 look like it's folding to the right。

#textDivChild {
    float: right;
}

所有这一切都是为了将​​所有内容对齐，因此即使动画的发生与之前完全相同，它也会看起来好像向右折叠。

Answer 2

你可以做到。您只需要使用一些特殊的 CSS 格式。

我所做的是设置一个“位置：绝对；”并用“右/上/左/下”指向位置。

• 如果您设置左侧 - 将从左侧开始

• 如果您设置正确 - 它将从右侧开始

• 如果您设置顶部，它将从顶部开始

• 如果您设置底部，它将从底部开始

您还可以决定先从什么开始 - 像这样水平或垂直

$('#hover_settings').toggle({effect: "fold", horizFirst: false}, 500);

或

$('#hover_settings').toggle({effect: "fold", horizFirst: true}, 500);

最后一个参数显然是——生效时间。 :)

jsfiddle

$(function() {
    function t(){
         $('#hover_settings')
        .toggle({effect: "fold", horizFirst: false}, 500);
    }
    
    
$('#button_settings1').click(function(){
    $('#hover_settings')
        .css('left','1.4em')
        .css('bottom','3em')
        .css('right','initial')
        .css('top','initial')    
   t(); 
});

$('#button_settings2').click(function(){
        $('#hover_settings')
        .css('right','2em')
        .css('top','2em')
        .css('left','initial')
        .css('bottom','initial')
   t(); 
});

    
});

#settings_wrapper{
	position:relative;
	background: aliceblue;
	display:inline-block;

}

#hover_settings{
	position: absolute;
	/*right: -20em;
	top: -6em;*/
	background: antiquewhite;
	border-radius: 20px;
	border: 2px solid #ccc;
	width: 10em;
	height: 5em;
	text-align: center;	
	display: none;
	/*left: 1.4em;*/
	/*bottom: 3em;*/
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<br><br><br><br><br><br>        
<div id='settings_wrapper'>
    <button id='button_settings1'>btn1</button>
    ..............................................
    <button id='button_settings2'>btn2</button>
    <div id='hover_settings'>
        Settings
    </div>
</div>