CODEWITHSUNDEEP
jquerytoggle
loriensleafs
loriensleafs

Reputation: 2255

adding a fade toggle effect into animation jquery

I have a button that when clicked rotates the button and slidetoggles a paragraph. I'd like to add a opacity animation toggle effect, so when the button is clicked it rotates and also toggles between an opacity of .3 adn .65 but I'm not 100 percent sure what the best way is to do it. I don't have access to jqueryUI unfortunately just jquery, so animating the toggle class doesn't seem to be an option. I was thinking maybe fadetoggle but that fades the element all the way out and back in, maybe there's a way to modify that? effects_of_yoga_2010_INFO is what I'm trying to toggle between the opacities.

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)');   
});

any help would be greatly appreciated

Upvotes: 1

Views: 1839

Answers (2)

Huangism
Huangism

Reputation: 16438

Maybe fadeTo will help you out

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

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

I took that from the jquery page. This will fade the element to an opacity that you define, you would need to define when to fadeTo what

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

    } else {
       // item is closed
    }

  });

Upvotes: 2

Hank
Hank

Reputation: 731

This might do it

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

Upvotes: 1

Related Questions