jquery - 在 jquery 动画中添加淡入淡出切换效果

Question

我有一个按钮，单击该按钮会旋转按钮并滑动切换段落。我想添加不透明度动画切换效果，因此当单击按钮时，它会旋转并在 0.3 和 0.65 的不透明度之间切换，但我不能 100% 确定最好的方法是什么。不幸的是，我无法访问 jqueryUI，只能访问 jquery，因此为切换类设置动画似乎不是一个选项。我在想也许 fadetoggle 但会让元素一直淡出然后再淡入，也许有办法修改它？ Effects_of_yoga_2010_INFO 是我试图在不透明度之间切换的内容。

var effects_of_yoga_2010_INFO = document.getElementById('effects_of_yoga_2010_INFO');
effects_of_yoga_2010_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.25s ease-in-out");

var effects_of_yoga_2010_DEG = 0;

$("#effects_of_yoga_2010_INFO").click(function() {
$("p#effects_of_yoga_2010_TEXT").slideToggle("250");
effects_of_yoga_2010_DEG += 45;
effects_of_yoga_2010_INFO.style.setProperty('-webkit-transform', 'rotateZ('+effects_of_yoga_2010_DEG+'deg)');   
});

任何帮助将不胜感激

Answer 1

也许 fadeTo 会帮助你

http://api.jquery.com/fadeTo/

  $('.element').click(function() {
    $(this).fadeTo('slow', 0.5, function() {
      // Animation complete.
    });
  });

我从 jquery 页面获取了它。这将使元素淡入您定义的不透明度，您需要定义何时淡出到什么

  $('.element').click(function() {
    // check to see if it is open
    if($(this).hasClass('open')) {
       // item already opened

    } else {
       // item is closed
    }

  });