我很难理解为什么会出现我所看到的行为。我有一段代码旨在淡出容器，替换内容，然后在完成后再次淡入。
我正在使用 jQuery，所以代码如下所示:
var transitionToNewContent = function(container, new_content) {
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};
transitionToNewContent($('#id'), "<p>magic</p>");
第一次单击激活此过渡的链接时，内容会立即被替换，然后淡出，然后再次淡入。
之后每次单击链接时，我都会看到正确的行为:淡出，然后淡入新内容。
知道为什么会这样吗？
我附上了一个显示行为的完整 html 文件:
我是 jquery 的新手，我正在尝试“以正确的方式”做事。任何关于风格的评论将不胜感激。
<doctype html>
<html>
<head>
<style type="text/css">
#main_container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
margin-top: 0;
height: 100%;
position: relative;
top: 0px;
bottom: 0px;
}
#loading {
float: right;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
}
#sidebar {
float: left;
width: 240px;
border: #078600 1px dashed;
position: relative;
top: 10px;
left: -250px;
margin-right: 20px;
background: #cccccc;
z-index: 1;
padding: 10px;
font-size: 0.65em;
display: none;
}
#main_content {
z-index: 0;
position: absolute;
top: 0px;
left: 5px;
width: 100%;
height: 100%;
float: right;
background: white;
padding-top: 0;
padding-bottom: 3em;
padding-left: 20px;
border-right: 1px dotted #078600;
border-left: 1px dotted #078600;
border-top: 3px solid white;
}
</style>
<link rel="stylesheet" type="text/css" href="/main.css" />
</head>
<body>
<div id="main_container">
<div id="sidebar"><h1>Sidebar</h1><p>some text</p></div>
<div id="loading" style="display: none">&nbps;</div>
<div id="main_content">
<h1 id="page_title">Title</h1>
<div id="page_content"><h2>heading</h2><p>Some testing text</p></div>
</div>
</div>
<script type="text/javascript">
var include = function(src) {
document.write('<script type="text/javascript" src="' + src + '"></scr' + 'ipt>');
};
include("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js");
include("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js");
var bootStrapSites = function() {
var sideBar = $('#sidebar');
sideBar.delay(1000).fadeIn();
loadSiteList(sideBar);
};
var transitionToNewContent = function(container, new_content) {
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};
var editSite = function(site) {
transitionToNewContent($('#page_content'), "<p>This is where the magic will happen</p>");
};
var loadSiteList = function(container) {
// $.getJSON("/sites/list.json", function(data) {
var data = $.parseJSON('[{"id": "1", "name": "cool name"}]');
container.empty(container);
container.append("<h2>new heading</h2>");
container.append("<ul id='sitesList'></ul>");
var sitesList = $('#sitesList');
$.each(data, function(idx, site) {
var id = 'show_site_id_' + site._id;
sitesList.append("<li><a id='" + id + "' href='#'>" + site.name + "</a></li>");
$('#' + id).click(function() {
editSite(site);
});
});
// });
};
</script>
<script type="text/javascript">
$(document).ready(function() {
bootStrapSites();
});
</script>
</body>
</html>
最佳答案
问题在于 jQuery 中有两种不同类型的函数——立即生效的函数和将效果添加到效果队列的函数。
让我们看一下您的代码:
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
fadeOut 向队列添加淡入淡出操作delay 向队列添加延迟empty 立即清空元素append 立即追加内容fadeIn 向队列添加淡入淡出操作将项目添加到队列的函数会立即返回——它们不会等到完成才生效。这意味着所有函数都(几乎)同时被调用——它们不会等待动画函数完成。
您需要使用 fadeOut 的回调参数来代替:
container.fadeOut(1000, function(){
container.empty().append(new_content).fadeIn();
});
当淡入淡出操作完成时触发该函数，因此清空和追加会延迟到元素被隐藏。
关于javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5525960/
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
-if!request.path_info.include?'A'%{:id=>'A'}"Text"-else"Text"“文本”写了两次。我怎样才能只写一次并同时检查path_info是否包含“A”？ 最佳答案 有两种方法可以做到这一点。使用部分，或使用content_forblock:如果“文本”较长，或者是一个重要的子树，您可以将其提取到一个部分。这会使您的代码变干一点。在给出的示例中，这似乎有点矫枉过正。在这种情况下更好的方法是使用content_forblock，如下所示:-if!request.path_info.inc
print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e
我对此有点困惑。我在RoR项目中的最终目标是从我的数据库中获取单个随机配置文件。我想它应该是这样的:@profile=Profile.find_by_user_id(rand(User.count))它一直抛出错误，因为user_id0不存在，所以我把它的一部分拿出来检查发生了什么:@r=rand(User.count)每次都返回0。发生什么了？我注册了5个假用户和5个相关配置文件来测试这个。如果我将Profile.find_by_user_id(rand(User.count))重写为Profile.find_by_user_id(3)它工作得很好。User.count也在工作。所以