Question

我有一个按钮，单击该按钮可旋转按钮并滑动一个段落。我想添加一个不透明度动画切换效果，所以当单击按钮时它会旋转并在不透明度为.3和.65之间切换，但我不是百分之百确定最好的方法是做什么。不幸的是，我无法访问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
    }

  });

Answer 2

这可能会这样做

$("#effects_of_yoga_2010_INFO").toggle(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)'); 
  $("#effects_of_yoga_2010_INFO").animate({
    opacity: 0.3
  }, 250); 
}, 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)');  
  $("#effects_of_yoga_2010_INFO").animate({
    opacity: 0.65
  }, 250); 
});

http://api.jquery.com/animate/

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

2 个答案: