gpt4 book ai didi

jquery - 如何设置 float 动画 :left divs?

转载 作者:行者123 更新时间:2023-12-01 02:58:22 26 4
gpt4 key购买 nike

所以我的网络应用程序的工具栏中有一系列 float:left div 元素。其中之一在单击时会通过 jQuery 滑动动画向右展开。该 div 右侧的所有 div 都应滑过以为其增加的尺寸腾出空间,但它们会跳转到新位置以腾出空间,然后当我再次缩小它时跳回来。我怎样才能将其修复为平滑的幻灯片?

我认为我需要 .animate(),但我不知道如何在不更改为position:absolute 的情况下执行操作,我不想使用它。

最佳答案

我不确定我完全理解你的意思,但我的猜测是:

http://jsfiddle.net/QvCyx/

 $('#contrast').click(function () {
var w = $('#contrastSlider').width();
$('#contrastSlider').toggle("slide", 300);
$('#about').animate({
'margin-left': -w
}, 300, function () {
this.style.marginLeft = 0;
});
});


更新

整个事情是这样的: http://jsfiddle.net/CPR7R/

 $('#contrast').click(function () {
var cs = $('#contrastSlider'),
w = cs.width();
if (!cs.is(':visible')) {
$('#about').css('margin-left',-w);
w = 0;
}
cs.toggle("slide", 300);
$('#about').animate({
'margin-left': -w
}, 300, function () {
this.style.marginLeft = 0;
});
});


第二次更新

检查这个例子:http://jsfiddle.net/EpCpr/

$('#container').on('click', '.slideTriggerer', function () {
var that = $(this),
sliderA = that.siblings('.slideA'),
sliderB = that.siblings('.slideB'),
defml = parseInt( sliderB.css('margin-left') ),
w = sliderA.outerWidth();
if (!sliderA.is(':visible')) {
sliderB.css('margin-left', -w+defml);
w = defml;
}

sliderB.animate({
'margin-left': -w+defml
}, 300, function () {
sliderB.css('margin-left', defml);
});
sliderA.toggle("slide", 300);
});

关于jquery - 如何设置 float 动画 :left divs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15372315/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com