1

クリックするとボタンが回転し、段落をスライドトグルするボタンがあります。不透明度アニメーションの切り替え効果を追加したいので、ボタンをクリックすると、ボタンが回転し、不透明度.3と.65の間で切り替わりますが、最善の方法が100％わかりません。残念ながら、jqueryUIにアクセスすることはできません。そのため、トグルクラスをアニメーション化することはできません。私は多分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 に答える