【问题标题】:I need to animate a h1 but when animation is done i need to change opacity of same article我需要为 h1 设置动画,但是当动画完成后,我需要更改同一篇文章的不透明度
【发布时间】:2014-06-18 13:29:10
【问题描述】:

所以我有一篇关于课程审查的文章。 当我将鼠标悬停在这篇文章上时,文章中的 H1 需要在 0.5 秒内将字体大小更改为 45px。当我移开光标时,H1 的字体大小需要在 0.25 秒内更改为 40px。

我使用这个 jquery 来实现这一点(我相信它会相应地工作)

$("article.recensie").hover(function(){
        $("article.recensie > h1").animate({ fontSize : '45px' }, 500);
    },
    function(){
    $("article.recensie > h1").stop().animate({ fontSize : "40px" }, 250);
    });

现在我需要在 0.5 秒内将文章中的所有内容更改为不透明度 0.2 当 H1 为 45 像素时。在鼠标移出时,文章中的所有内容都需要在 0.25 秒内变回不透明度 1。

希望有人可以帮助我,我希望我正确地制作了 H1 动画。

这是我正在使用的 HTML:

  <section class="album_reviews">
    <h2 class="sectiontitel"> Album Reviews </h2>
    <article class="recensie">
      <h1> Neil Young – A Letter Home </h1>
      <img src="Images/Albums/A_Letter_Home.jpg" alt="album_image"/>
      <p>Earlier this year, Neil Young unveiled Pono, a super-high-def audio service meant to deliver us from the sonic crimes of the earbud era. For his next act, he's released an acoustic covers set recorded at Jack White's Nashville music shop on a Voice-O-Graph--a super-low-def 1940s contraption that looks like a phone booth and sounds a few steps removed from a rusty tin can and some twine. If it's meant as some kind of joke, here's the punch line: In its perverse way, A Letter Home is one of the most enjoyable records Young has made this century.</p>
      <p> 
        <a href="http://www.rollingstone.com/music/albumreviews/a-letter-home-20140502#ixzz33g0Hq3pw"> Read more </a>
      </p>       
    </article>
  </section>

  <section class="band_members">
    <h2 class="sectiontitel"> Band Members</h2>
    <article class="recensie">
      <h1> Neil Young </h1>
      <figure>
          <img src="Images/Artists/Neil_Young.jpg" alt="Macaque in the trees">
          <figcaption> Neil Young <br /> Singer Songwriter </figcaption>
      </figure>
    </article>
  </section>

【问题讨论】:

  • 你有什么问题?
  • 现在,当 H1 为 45 像素时,我需要在 0.5 秒内将文章中的所有内容更改为不透明度 0.2。在鼠标移出时,文章中的所有内容都需要在 0.25 秒内变回不透明度 1。正如我在大量文字中所说的那样:)希望有人可以帮助我,我希望我正确地制作了 H1 动画。
  • 这不是问题!这是对支持/指导/帮助的请求。 Stack Overflow 是一个网站,提供有关编程语言和程序的具体问题以及这些问题的答案;它不是帮助台、论坛或聊天室。根据经验,考虑其他人是否可以通过 Google 找到这个问题并发现它对自己有用。干杯
  • 很抱歉你这么看。我认为这是一个问题......一个寻求帮助的问题是......因为我不知道该怎么做,而且我没有时间在谷歌上寻找答案,所以我想在这里问它。会快很多。帮助我的人似乎并不介意,否则他们不会提供帮助。不过下次我会考虑的!感谢您的建议
  • 回答“帮助台”问题的人是否“似乎在意”对我来说意义不大。

标签: jquery jquery-animate


【解决方案1】:

你可以这样使用动画的完整事件

$("article.recensie").hover(function () {
        $("article.recensie > h1").animate({
            fontSize: '45px'
        }, 500, function () {
            $("article.recensie").css("opacity", "0.2");
        });
    },
    function () {
        $("article.recensie > h1").stop().animate({
            fontSize: "40px"
        }, 250, function () {
            $("article.recensie").css("opacity", "1");
        });
    });

Fiddle

【讨论】:

  • Aweomse,非常感谢.. 看起来它完全符合它的需要
  • 是的,我需要等几分钟才能做到;)。顺便说一句,还有一种方法可以将动画用于不透明度吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-25
  • 1970-01-01
  • 2019-12-24
  • 1970-01-01
  • 2017-12-21
  • 2021-09-23
相关资源
最近更新 更多