草庐IT

jquery - 在 DOM 上可视化地交换两个 HTML 元素，然后将其全部动画化？

coder 2023-08-10 原文

是否可以在 jQuery 中交换两个容器的位置 - 无论是在视觉上还是在 DOM 中，还可以为结果设置动画？

我有:

<div id="container">
    <div id="one"><a class="moveUp">Up</a></div>
    <div id="two"><a class="moveUp">Up</a></div>
    <div id="three"><a class="moveUp">Up</a></div>
</div>

单击该链接会将那个 div 的位置与上面的那个交换。 大多数示例使用绝对定位并偏移 top 属性来实现此目的...但是当用户在其他地方调用函数时，我需要按照数据在屏幕上显示的顺序读取数据。

所以我想到了这个:

$('#container div').on('click', '.moveUp', function() {

    divInQuestion = $(this).closest('div').attr('id');  //id of this div

    if (divInQuestion > '1') {

        switchWithDiv = divInQuestion - 1;  //id of other div

        firstSelector = $('#chapterset-'+divInQuestion).html();     //save contents of each div.  I actually don't 
        secondSelector = $('#chapterset-'+switchWithDiv).html();        //do it this way, I regenerate the content

        $('#chapterset-'+divInQuestion).html()firstSelector.replaceWith(secondSelector);    //replace div with other div
        $('#chapterset-'+switchWithDiv).html()secondSelector.replaceWith(firstSelector);
    }
});

现在，我的代码实际上比这更复杂，但它提供了我正在做的事情的外壳。

jQuery 工作正常，但是我如何包含动画？

PS:试图让 jsFiddle 运行，但他们的服务器可能已关闭 atm？？!!？

最佳答案

首先尝试对其进行动画处理，进行视觉交换，然后在 DOM 中交换它们:

http://jsfiddle.net/BYossarian/GUsYQ/5/

HTML:

<div id="container">
    <div id="one"><a class="moveUp">Up 1</a></div>
    <div id="two"><a class="moveUp">Up 2</a></div>
    <div id="three"><a class="moveUp">Up 3</a></div>
</div>

CSS:

#container {
    width: 200px;
    border: 1px solid black;
    position: relative;
}
#container div {
    border: 1px solid black;
    position: relative;
}
#container a {
    display: block;
}

JS:

var animating = false;

$('#container').on('click', '.moveUp', function () {

    if (animating) {return;}

    var clickedDiv = $(this).closest('div'),
        prevDiv = clickedDiv.prev(),
        distance = clickedDiv.outerHeight();

    if (prevDiv.length) {
        animating = true;
        $.when(clickedDiv.animate({
            top: -distance
        }, 600),
        prevDiv.animate({
            top: distance
        }, 600)).done(function () {
            prevDiv.css('top', '0px');
            clickedDiv.css('top', '0px');
            clickedDiv.insertBefore(prevDiv);
            animating = false;
        });
    }
});

关于jquery - 在 DOM 上可视化地交换两个 HTML 元素，然后将其全部动画化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19155939/

jqueryHTMLdiv39gtdomanimation

有关jquery - 在 DOM 上可视化地交换两个 HTML 元素，然后将其全部动画化？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - Ruby 中的波形可视化 - 2

    我即将开始一个将录制和编辑音频文件的项目，我正在寻找一个好的库(最好是Ruby，但会考虑Java或.NET以外的任何库)以进行实时可视化波形。有人知道我应该从哪里开始搜索吗？ 最佳答案 要流入浏览器的数据量很大。Flash或Flex图表可能是唯一能提高内存效率的解决方案。Javascript图表往往会因大型数据集而崩溃。 关于ruby-Ruby中的波形可视化，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐