小马车JQuery .animation()
小马车JQuery .animation()
提问于 2013-05-29 21:48:14
这里我有6个div (.sticker)在一个div中，onClicking其中一个我想要fadeOut其他人将点击的div保持在它的位置(这就是为什么我做了后置/偏置的事情)然后我想把它移动到较大的div的中间，当它以高度和宽度增长时，显示一个隐藏的div (.info)。闭幕式也一样！所以，这段代码是可以工作的，但它确实是滞后的，它不像jQuery应该是平滑的，我是不是做错了什么？
感谢所有的人！
$("body").on('click', '.sticker', function () {
if (!is_open) {
postop = $(this).position().top;
posleft = $(this).position().left;
$('.sticker').not(this).fadeOut(350, function () {
$(".sticker").css("position", "absolute").css("left", posleft + "px").css("top", postop + "px");
$(".sticker").animate({
'top': '0px',
'left': '300px',
'height': '480px',
'width': '750px',
'left': '90px'
}, 350);
$(".sticker").children(".wrap").animate({
'height': '343px',
'width': '750px'
}, 350);
$(".sticker").find(".imgspace").animate({
'height': '343px',
'width': '750px'
}, 350);
$(".sticker").find(".info").animate({
'height': '100px'
}, 350);
$('.arrow-left').animate({
'left': '-20px'
}, 450);
$('.arrow-right').animate({
'left': '880px'
}, 450);
is_open = true;
});
}
if (is_open) {
$(".sticker").children(".wrap").animate({
'height': '193px',
'width': '300px'
}, 350);
$(".sticker").find(".imgspace").animate({
'height': '193px',
'width': '300px'
}, 350);
$(".sticker").find(".info").animate({
'height': '0px'
}, 350);
$(".sticker").animate({
'height': '230px',
'width': '300px',
'top': postop,
'left': posleft
}, 350, function () {
$(".sticker").css("position", "static");
$(".sticker").not(this).fadeIn(300);
is_open = false;
});
}
});回答 2
Stack Overflow用户
发布于 2013-05-29 21:51:16
当您单击其中一个时，您将希望使用.siblings来隐藏所有其他内容。我会对jQuery API文档做一些研究。这就是我要开始的地方。
Stack Overflow用户
发布于 2013-05-29 22:22:55
正如Yotam所评论的，没有jsFiddle很难调试。但是，一些突出在我身上的事情(绝不是详尽无遗的，我也不是JavaScript专家)：
- 缓存jQuery对象，而不是继续请求DOM (var $sticker = $('.sticker'))
- 把你的动画链接在同一个物体上
- $sticker.children(".wrap")和$sticker.find(".imgspace")有什么区别？你能不使用$sticker.find(".wrap，.imgspace")吗？
您可以通过将值设置为变量对象来进一步简化代码，而不是使用不同的值两次调用相同的方法。
$("body").on('click', '.sticker', function () {
if (!is_open) {
var $position = $(this).position(),
$sticker = $('.sticker');
$sticker.not(this).fadeOut(350, function () {
$sticker.css({
position: 'absolute',
left: $position.left+'px',
top: $position.top+'px'
})
.animate({
'top': '0px',
'left': '300px',
'height': '480px',
'width': '750px',
'left': '90px'
}, 350);
$sticker.find(".wrap, .imgspace").animate({
'height': '343px',
'width': '750px'
}, 350);
$sticker.find(".info").animate({ 'height': '100px' }, 350);
$('.arrow-left').animate({ 'left': '-20px' }, 450)
.animate({ 'left': '880px' }, 450);
is_open = true;
});
}
if (is_open) {
$sticker.find(".wrap, .imgspace").animate({
'height': '193px',
'width': '300px'
}, 350);
$sticker.find(".info").animate({
'height': '0px'
}, 350);
$sticker.animate({
'height': '230px',
'width': '300px',
'top': $position.top,
'left': $position.left
}, 350, function () {
$sticker.css("position", "static")
.not(this).fadeIn(300);
is_open = false;
});
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16824447
复制相关文章
相似问题
腾讯云开发者
