Question

我希望我的函数运行一次，因此h1元素将一次转到45px然后使用回调函数（将不透明度更改为0.2）。鼠标输出也是如此

$("article.recensie").mouseover(function () { // vraag a

  $("article.recensie h1").animate({
    fontSize: '45px'
  }, 500,

  function () {
    $("article.recensie").animate({
        opacity: '0.2'
    }, 500);
  })
});

$("article.recensie").mouseout(function () {

  $("article.recensie h1").animate({
    fontSize: '40px'
  }, 250,

  function () {
    $("article.recensie").animate({
        opacity: '1'
    }, 500);
  })
});

Answer 1

如果您只想为css-properties设置动画，我建议您使用CSS3而不是jQuery。

示例＆amp;这里的解释： http://css3.bradshawenterprises.com/transitions/#how2use

这里的工作示例： http://plnkr.co/edit/R8cFi9L9HRwlRypMVTlx

  article.recensie {
    background-color: red;
    opacity: 1;
    font-size: 40px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  article.recensie:hover {
    opacity: 0.2;
    font-size: 45px;
  }

如何一次运行动画+回调函数

1 个答案: