jquery - 从上到下过渡不透明文本

coder 2023-08-12 原文

我有一个 div，具有给定的 height，它使用 jQuery 转换到更大的 height。过渡到更高的 div 使用 transition 元素平滑。由于 div 扩展过渡是 线性，延迟 0.5 秒，我还使用 transition 从 移动 7 行文本不透明度:0 到 不透明度:1。但是，我希望这个转换从上到下(第 1 行比第 2 行快一点，比第 3 行快一点，等等)，在 div 转换之后，而不是一次所有行一次。怎么做？代码如下:

    $("small").on("click", function() {
      $(".post1").toggleClass("show-post");
    });

.post1 {
  border: 1px solid grey;
  margin: 20px auto;
  width:33%;
  height:125px;
  padding:0 10px;
  border-radius:4px;
  background:#FFFFFF;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
}

.descr {
  opacity:0;
}

small {
  position:relative;
  left:300px;
  bottom:30px;
}

.show-post {
  height:350px;
}

.show-post .descr{
  opacity:1;
  transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post1">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

更新:

现在我的代码是这样的:

 <script>
    $("small").on("click", function() {
      $(this).parent().toggleClass("show-post");
      $(".first").animate({'opacity':1}, 1000);
      $(".second").animate({'opacity':1}, 2000);
      $(".third").animate({'opacity':1}, 3000);
      $(".fourth").animate({'opacity':1}, 4000);
      $(".fifth").animate({'opacity':1}, 5000);
      $(".sixth").animate({'opacity':1}, 6000);
      $(".seventh").animate({'opacity':1}, 7000);
      $(".eight").animate({'opacity':1}, 8000);
    });
    
  </script>

.descr {
  opacity:0;
}

.first, .second, .third {
  opacity:0;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">
      <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </div><div class="second">do eiusmod temporincididunt ut labore et dolore magna </div><div class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div><div class="fourth"> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="fifth"> Duis aute irure dolor in reprehenderit in voluptate velit esse </div><div class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div><div class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit </div><div class="eight">anim id est laborum.</div>
    </p>
  </div>

我还没有在 css 代码中添加所有 class 但我可以看到它有效，因为我可以为每一行的每个转换设置不同的时间。现在，这里有一个新手问题:如何选择 .descr 下的所有 div，而不必创建额外的 css 元素并引用它下面的每个单独的 .class:.first, .second, .third.尝试了 .descr, div 但不起作用。这是一个如此简单的问题，没有人问，因此找不到答案。

最佳答案

div p div 将选择 descr 下的所有 div。

编辑:我制作了一个有效的部分(带有切换 css 和重复动画)

我使用段落而不是 div 来表示你的行和一个部分来容纳它们。

$("small").on("click", function () {

    $(this).parent().toggleClass("show-post");
    if ($(this).parent().hasClass ("show-post") && ($('.show-post').css('height') == '500px')) {
    $(".first").animate({
        'opacity': 1
    }, 1000);
    $(".second").animate({
        'opacity': 1
    }, 2000);
    $(".third").animate({
        'opacity': 1
    }, 3000);
    $(".fourth").animate({
        'opacity': 1
    }, 4000);
    $(".fifth").animate({
        'opacity': 1
    }, 5000);
    $(".sixth").animate({
        'opacity': 1
    }, 6000);
    $(".seventh").animate({
        'opacity': 1
    }, 7000);
    $(".eight").animate({
        'opacity': 1
    }, 8000);

} else if (!$(this).parent().hasClass ("show-post")) {
    $(".first").animate({
        'opacity': 0
    }, 1000);
    $(".second").animate({
        'opacity': 0
    }, 2000);
    $(".third").animate({
        'opacity': 0
    }, 3000);
    $(".fourth").animate({
        'opacity': 0
    }, 4000);
    $(".fifth").animate({
        'opacity': 0
    }, 5000);
    $(".sixth").animate({
        'opacity': 0
    }, 6000);
    $(".seventh").animate({
        'opacity': 0
    }, 7000);
    $(".eight").animate({
        'opacity': 0
    }, 8000);

}
});

div section p {
  opacity: 0;
}
.post {
    border: 1px solid grey;
    margin: 20px auto;
    width:200px;
    height:155px;
    padding:0 10px;
    border-radius:4px;
    background:#FFFFFF;
    color:black;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    overflow:hidden;
}

.show-post {
    height:500px;
    opacity:1;
    transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
  <h4>This is a concert</h4>
  <p>Where: XYZ Arena</p>
  <p>When: XYZ h</p>
  <small>(Click to expand)</small>
  <section class="descr">
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
    <p class="second">do eiusmod temporincididunt ut labore et dolore magna</p>
    <p class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
    <p class="fourth">ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p class="fifth">Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
    <p class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
    <p class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit</p>
    <p class="eight">anim id est laborum.</p>
  </section>
</div>

这是一个fiddle

关于jquery - 从上到下过渡不透明文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32341949/

下过 jquery code 34 opacity html css

有关jquery - 从上到下过渡不透明文本的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
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来发送
jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过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
ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2
我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason
ruby - 如何为 pbcopy 生成富文本链接 - 2
我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te
ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位
ruby - 如何将一段文本可逆地压缩成更少的 ASCII 字符？ - 2
我想获取任意的ASCII文本字符串，例如“Helloworld”，并将其压缩为字符数较少(尽可能少)的版本，但要采用可以解压缩的方式。压缩版本应仅由ascii字符组成。有没有一种方法可以做到这一点，尤其是在Ruby中？最佳答案如果知道只会使用ASCII字符，那就是每个字节的低7位。通过位操作，您可以将每8个字节混合成7个字节(节省12.5%)。如果您可以将其放入更小的范围(仅限64个有效字符)，则可以删除另一个字节。但是，因为您希望压缩形式也只包含ASCII字符，所以会丢失一个字节-除非您的输入可以限制为64个字符(例如，有损压
ruby-on-rails - ActiveRecord:除非另有说明，否则在保存之前使所有文本字段都调用 strip - 2
多年来，我在各种网站上遇到过各种问题，用户在字符串和文本字段的开头/结尾放置空格。有时这些会导致格式/布局问题，有时会导致搜索问题(即搜索顺序看起来不对，但实际上并非如此)，有时它们实际上会使应用程序崩溃。我认为这会很有用，而不是像我过去所做的那样放入一堆before_save回调，向ActiveRecord添加一些功能以在保存之前自动调用任何字符串/文本字段上的.strip，除非我告诉它不是，例如do_not_strip:field_x,:field_y或类定义顶部的类似内容。在我去弄清楚如何做到这一点之前，有没有人看到更好的解决方案？明确一点，我已经知道我可以做到这一点:befor
ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t
jquery - 如何在 rails 3.1 上安装 jQuery - 2
我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了最佳答案看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

jquery - 从上到下过渡不透明文本

有关jquery - 从上到下过渡不透明文本的更多相关文章

随机推荐