1

我有一个按钮，单击该按钮可旋转按钮并滑动切换段落。我想添加一个不透明动画切换效果，所以当单击按钮时，它会旋转并在 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)');   
});

任何帮助将不胜感激

4

2 回答 2

2

也许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
    }

  });
于 2012-10-03T14:09:30.883 回答
1

这可能会做到

$("#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/

于 2012-10-03T14:12:59.513 回答