Question

所以我有一篇关于课程的文章。当我将鼠标悬停在这篇文章上时，文章中的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像素时。在mouseout上，文章中的所有内容都需要在0.25秒内更改回不透明度。

希望有人可以帮助我，我希望我能正确地完成H1动画。

这是我使用btw的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>

Answer 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

我需要为h1设置动画，但是当动画完成后，我需要更改同一篇文章的不透明度

1 个答案: