使用jQuery來切換CSS旋轉

我已經在使用插件來處理CSS3屬性。它在點擊時起作用，並旋轉45度，但當再次點擊隱藏內容時，它不會旋轉回來。關於如何使這項工作的任何想法？使用jQuery來切換CSS旋轉

$("#faq dt").click(function() { 
    $(this).next('dd').slideToggle('fast'); 
if ($(this).next('dd').is(':visible')) { 
$(this).children('span').transition({ rotate: '45deg' }); 
} 
else { 
$(this).children('span').transition({ rotate: '-45deg' }); 
} 
});

您可以查看活動站點位置：http://www.revival.tv/lastdays/

工作片斷：

$("#faq dt").click(function() { 
$(this).next('dd').slideToggle('fast', function() { 
    if ($(this).is(':visible')) { 
     $(this).prev('dt').children('span').transition({ rotate: '45deg' }); 
    } else { 
     $(this).prev('dt').children('span').transition({ rotate: '0deg' }); 
    } 
}); 
});

來源

2012-08-28 souporserious

我認爲你應該使用'是（ '：可見'）'後'toggle'動畫 –

就是這樣。我知道的是，當你觸發slideToggle的dd，dd仍然可見，直到切換動畫結束。因此，您應該判斷動畫之後dd是否可見作爲回調函數。

文檔是here

$("#faq dt").click(function() { 
    $(this).next('dd').slideToggle('fast', function() { 
     if ($(this).is(':visible')) { 
      alert('1'); 
     } else { 
      alert('2'); 
     } 
    }); 
});

EDIT

有時，元件的選擇是一個問題。我只是用alert('1') and alert('2')替換它們。我希望你抓住主要觀點。

來源

2012-08-28 00:56:22

謝謝！這工作。將第二條語句更改爲0會將其返回到開始位置。我感謝你的幫助和解釋。讓我更好地思考它。 – souporserious

-1

這裏有一個quick fiddle與基本旋轉功能。實現我給你:)

來源

2012-08-28 00:42:01 Jason

謝謝，我現在正在爲我準備，我有一個問題讓它回去，非常切換動畫。 – souporserious

你的小提琴與OP – zenkaty

有同樣的問題小提琴演示的是如何手動操作（因爲你的插件有問題）。如果你想讓它恢復，請輸入一些切換邏輯，並在你的學位前加一個負號。我不是來爲你做所有的工作，而是幫助你。 – Jason

爲什麼不把旋轉放在一個類，然後使用JavaScript來添加和刪除類，所以它來回拂動？

來源

2012-08-28 00:51:02 zenkaty

感謝這個工程，但我試圖找到一個更好的方法來保持我的HTML清潔。 – souporserious

這裏有雲速戰速決：

$("#faq dt").click(function() { 
    $(this).next('dd').slideToggle('fast'); 


    if (!$(this).next('dd').hasClass('collapsed')) { 
     $(this).children('span').transition({ 
      rotate: '45deg' 
     }); 
     $(this).next('dd').addClass('collapsed'); 
    } 
    else { 
     $(this).children('span').transition({ 
      rotate: '0deg' 
     }); 
     $(this).next('dd').removeClass('collapsed'); 
    } 
});

而且你可以看到它在這裏工作：http://jsfiddle.net/crisboot/6Aj9e/

來源

2012-08-28 01:11:12 Crisboot

使用jQuery來切換CSS旋轉

回答

相關問題