Question

下滑效果不起作用。它显示了元素，但它没有，“向下滑动”。

HTML：

.hidden { display: none; }

/* Settings */

.settings {
    width: 650px;
    margin: 0 auto;
    padding: 1em;
}

.settings h4 {
    padding: 1em 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacece;
}

table {
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 200;
}

table.options { 
    width: 100%;
    table-layout: fixed;
}

.options tr { border-bottom: 1px solid #cacece; }
.options td { padding: 0.5em 0; }
.options .edit { text-align: right; }
.options .name { font-weight: bold; }
.options .remove-all, .options .remove-account { font-weight: 200; }

/* Edit Name Table */

table.edit-name {
    width: 300px;
    font-size: 0.9rem;
    margin: 0 auto;
}

.edit-name tr { border: none; }
.edit-name .save, .cancel { margin-left: 10px; }

/* Edit Table */

input[type='email'],
input[type='password'],
.edit-email .save,
.edit-email .cancel,
.edit-password .save,
.edit-password .cancel
{ margin-left: 15px; }

.edit-email, .edit-password { text-align: center; }

CSS：

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $('.name-edit').slideDown('slow');
});

jQuery的：

<h1><strong><%= @group.name %></strong></h1>
<p><em><%= @group.description %></em><p>
<p>Operated by: <% @owner = User.find(@group.owner_id) %><%= @owner.name %></p>
<% if current_user.group_id == nil %>
  <%= form_for(@prospect) do |f| %>
    <%= f.hidden_field :group_id, value: @group.id %>
    <%= f.submit "Join Group", class: "btn btn-primary" %>
  <% end %>
<% end %>
<% if current_user.group_id == @group.id %>
  <%= form_for(@post) do |f| %>
    <%= f.hidden_field :group_id, value: @group.id %>
    <%= f.hidden_field :user_id, value: current_user.id %>
    <div class="form-group col-xs-12">
      <div class="row">
        <div class="col-xs-11">
          <%= f.text_area :content, class: 'form-control', placeholder: "What ails you?" %>
        </div>
        <div class="col-xs-1">
          <button type="button" class="btn btn-success" onclick="addpic(0);">Add a pic</button>
        </div>
      </div>
    </div>
    <div class="form-group hidden col-xs-12" id="picture0">
      <%= f.file_field :image, class: 'form-control' %>
    </div>
    <div class="form-group col-xs-12 actions">
      <%= f.submit %>
    </div>
  <% end %>
  <% @group.posts.each do |p| %>
    <div class="post">
      <div class="post-meta">
        <%= p.user.name %> <em><%= p.created_at.strftime('%a, %b %e, %Y %r') %></em>
      </div>
      <%= p.content %>
      <% if p.image %>
        <img src="data:image/png;base64,<%= p.image %>" class="img-responsive"/>
      <% end %>
      <% p.replies.each do |r| %>
        <%= r.user.name %><br/><%= r.content %>
        <% if r.image %>
          <img src="data:image/png;base64,<%= r.image %>" class="img-responsive"/>
        <% end %>
      <% end %>
      <a class="reply">Reply</a>
      <div class="reply hidden">
        <%= form_for(@reply) do |ff| %>
          <%= ff.hidden_field :post_id, value: p.id %>
          <%= ff.hidden_field :user_id, value: current_user.id %>
          <div class="form-group col-xs-12">
            <div class="row">
              <div class="col-xs-11">
                <%= ff.text_area :content, class: 'form-control', placeholder: "Write a reply..." %>
              </div>
              <div class="col-xs-1">
                <button type="button" class="btn btn-success" onclick="addpic(<%= p.id %>);">Add a pic</button>
              </div>
            </div>
          </div>
          <div class="form-group hidden col-xs-12" id="picture<%= p.id %>">
            <%= ff.file_field :image, class: 'form-control' %>
          </div>
          <div class="form-group col-xs-12 actions">
            <%= ff.submit %>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
<% end %>

<script>
  var addpic = function(id) {
    var el = '#picture' + id;
    $(el).removeClass('hidden');
  }

  $('.reply').on('click', function(e){
    e.preventDefault();
    $(this).next().removeClass('hidden');
  });
</script>

结果：https://jsfiddle.net/ekL6450a/

Answer 1

表行不支持动画，您可以考虑将表包装在div中并在div上应用动画。

来自“学习jQuery”

表格行对动画存在特殊障碍，因为浏览器使用不同的值（表格行和块）作为其可见的显示属性。没有动画的.hide（）和.show（）方法始终可以安全地与表行一起使用。从jQuery版本1.1.3开始，也可以使用.fadeIn（）和.fadeOut（）。

Answer 2

你正在使用表格......切换到无表格的方法，它会起作用。我用一个例子更新了你的小提琴：

HTML

<div class='settings'>
            <h4>Account Settings</h4>
      <div class="options">
        <span class="name username">Name</span>
        <span class="value">Robert Rocha</span>
        <span class="edit editName"><a href="#">Edit</a></span>
      </div>
      <div class="hidden name-edit">
        <div>
          <label for='fname'>First</label><br>
          <input type='text' name='fname' class='fname' id='fname'><br>

        </div>
      </div>
</div> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

的Javascript

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $(this).parent().parent().next('.name-edit').slideToggle('slow');
});

Answer 3

问题在于TR标签的性质。 slideDown适用于display：block;

元素

只是为了好玩，如果你添加

tr{
    display: block;
}

在你的.hidden的css之前，你会发现slideDown正常工作。

请参阅小提琴enter link description here

jQuery向下滑动而不是向下滑动

3 个答案: