添加一個淡入淡出的切換效果到動畫jquery

我有一個按鈕，當點擊旋轉按鈕，並滑動一段。我想添加一個不透明的動畫切換效果，所以當點擊按鈕時，它會旋轉，並在不透明度爲.3和.65之間切換，但我不能100％確定最好的方法是做什麼。我不能訪問jqueryUI不幸的只是jquery，所以動畫切換類似乎不是一個選項。我想也許是fadetoggle，但這會淡化元素一路出來，回來，也許有一種方法來修改？ effects_of_yoga_2010_INFO是我試圖在不透明之間切換的東西。添加一個淡入淡出的切換效果到動畫jquery

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

任何幫助，將不勝感激

來源

2012-10-03 loriensleafs

也許fadeTo會幫助你

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

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

我把從jQuery的頁面。這將元素褪色的不透明度您定義的，你需要的時候定義到fadeTo什麼

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

    } else { 
     // item is closed 
    } 

    });

來源

2012-10-03 14:09:30 Huangism

所以那怎麼弄設置爲切換？ – loriensleafs

這不能切換，這就是爲什麼我說你必須定義什麼時候淡出什麼。切換淡入淡出會像您已經發現的那樣完全淡入/淡出元素。使用jquery並不難，你可以在項目打開時添加一個類並在關閉時刪除類，所以當點擊時檢查類是否在元素上，以便知道你在哪個狀態。更新我的答案，希望它有幫助 – Huangism

是的，你也可以使用其他答案使用切換並定義兩種狀態。他使用的動畫也起作用，fadeTo只是包裝動畫 – Huangism

這可能做

$("#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); 
});

來源

2012-10-03 14:12:59 Hank

主要工作，但它很奇怪，我已將按鈕設置爲.3的不透明度加載，然後當你使用該功能點擊它時，它會進一步淡化，然後備份，所以它幾乎就像.3開始otu，然後漸漸降低.3然後又回來了另一個數量？我不太確定，這裏是小提琴，我把所有這一切都在http://jsfiddle.net/loriensleafs/TMGv3/18/ – loriensleafs

想通了，很好的解決方案，非常感謝 – loriensleafs

哦，很好，很高興我可以幫幫我。我也想出了一個解決方案，應該涵蓋所有的解決方案，而不是單獨的解決方案。它在這裏供您參考：http://jsfiddle.net/TMGv3/20/ – Hank

添加一個淡入淡出的切換效果到動畫jquery

回答

相關問題