【问题标题】:Using jQuery slide/animate to move a centered item to left while sliding in div from right使用 jQuery 幻灯片/动画将居中的项目向左移动,同时从右侧滑入 div
【发布时间】:2015-10-14 14:23:31
【问题描述】:

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

这是我目前所拥有的基本 jsFiddle 示例:http://jsfiddle.net/g794j09o/1/

很遗憾,我遇到了两个问题:

  1. 如何在框架外对齐moreInfo div 而不允许滚动并保持loginBox 居中。
  2. 如何正确使用 jQuery 幻灯片/动画功能将loginBox 向左滑动一点,同时在整个moreInfo 框中滑动。

我在 SO 中查看了其他 jQuery 幻灯片/动画问题,发现它们有助于学习如何制作动画,但我在从 CSS 方面解决所有问题时遇到了问题。

【问题讨论】:

    标签: javascript jquery html css animation


    【解决方案1】:

    问题在于您只是在滑动“moreInfo”div,实际上您应该显示和滑动 div 而不是“将 div 隐藏在框架之外”,您之前显然已经做过某种动画,但是当您提到“框架”等时,您应该阅读网络编程(p.s 我推荐 MVA 来学习新主题)

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

    $("#moreInfo").click(function() {
        $("#divLogin").animate({ marginLeft: "-387px"} , 1000);
        setTimeout(divmoreinfo, 2000);
    });
    
    function divmoreinfo() {
         $("#divLogin").addClass('divLoginFloat');
         $("#divMoreInfo").show('slide', {direction: 'right'}, 1400);    
    }
    

    JSFiddle

    【讨论】:

    • 谢谢,我会尝试以此为基础。唯一让我担心的是divMoreInfoshow 会像口吃一样自动将divLogin 推过去,而不是滑动它。也许我实际上可以在show divMoreInfo 之前执行divLogin 幻灯片。我知道 Frame 并不是用来形容我想说的话的完美词,但它足够贴切。
    • @atschaal 请查看更新版本,按照您的要求工作。 PS如果这有帮助,请标记为已接受的答案:)
    • 我还修改了 jsfiddle 来做到这一点。这仍然不是我想要的,一旦show 激活,divLogin 仍然会跳转。我想我将不得不用宽度或其他东西来做到这一点。
    • 它不会跳到我的 JSFiddle 上? @atschaal
    • 确实如此,对不起。我找到了更好的方法来做到这一点。 jsfiddle.net/tVHYg/1508
    猜你喜欢
    • 2013-09-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多