使用jQuery slide / animate将居中项目向左移动，同时从div向右滑动

The title isn't the best, but what I'd like to accomplish is to move a center login box to the left and slide in div from right upon anchor tag push. Basically moving centered box to a left 'column' (for lack of a better word) and slide a div into frame from the right, into the right 'column'.

标题不是最好的,但我想要完成的是将一个中心登录框移动到左侧,并在锚标签推送时从右侧滑动div。基本上将居中框移动到左侧“列”(缺少更好的单词)并将div从右侧滑入框架,进入右侧“列”。

Here is a basic jsFiddle example of what I have so far: http://jsfiddle.net/g794j09o/1/

这是我到目前为止的基本jsFiddle示例:http://jsfiddle.net/g794j09o/1/

Unfortunately I have two issues I'm having trouble with:

不幸的是我有两个问题我遇到了麻烦:

1. How to line up the moreInfo div outside the frame without allowing scroll and maintaining the centered loginBox.

如何在框架外排列moreInfo div而不允许滚动和维护居中的loginBox。

2. How to properly use the jQuery slide/animate features to slide the loginBox to the only to left a little, while sliding in the entire moreInfo box.

如何正确使用jQuery幻灯片/动画功能将loginBox滑动到只剩下一点,同时在整个moreInfo框中滑动。

I have looked around SO for other jQuery slide/animate questions and have found them to be helpful for learning how to animate something, but I'm having issues solving everything from the CSS side of things.

我已经查看了其他jQuery幻灯片/动画问题,并发现它们有助于学习如何动画某些东西,但我遇到的问题从CSS方面解决了所有问题。

1 个解决方案

#1

The problem was that you was just sliding the 'moreInfo' div where in fact you should have been showing and sliding the div instead of "Hiding the div out of the frame", you have clearly done some kind of animation before but you should read up on web programming as you are referring to "Frames" etc. (p.s i recommend MVA for learning new topics)

问题是你只是滑动了'moreInfo'div实际上你应该一直在显示和滑动div而不是“隐藏div出框架”,你之前已经清楚地做了某种动画但是你应该阅读关于网络编程,因为你指的是“框架”等(ps我推荐使用MVA来学习新主题)

Anyway this is the Jquery, it is not perfect but this should give you the stepping stone you are looking for:

无论如何这是Jquery,它并不完美,但这应该会给你你正在寻找的垫脚石:

$("#moreInfo").click(function() {
    $("#divLogin").animate({ marginLeft: "-387px"} , 1000);
    setTimeout(divmoreinfo, 2000);
});

function divmoreinfo() {
     $("#divLogin").addClass('divLoginFloat');
     $("#divMoreInfo").show('slide', {direction: 'right'}, 1400);    
}

JSFiddle