使用jQuery添加魔術CSS3動畫時無法正常工作

我試圖在一些代碼中使用一些神奇的CSS類（http://www.minimamente.com/magic-css3-animations/），並試圖用mouseenter和mouseleave添加jquery，但它並不工作......完全不能！使用jQuery添加魔術CSS3動畫時無法正常工作

以下是我已經嘗試

$(document).ready(function(){ 
    $('#banner-holder').on('mouseenter', function(){ 
     $(this).find('#prev, #next').addClass('magictime perspectiveLeft'); 
    }); 
    $('#banner-holder').on('mouseleave', function(){ 
     $(this).find('#prev, #next').removeClass('perspectiveLeft'); 
     $(this).find('#prev, #next').addClass('perspectiveLeftRetourn'); 
    }); 
});

它觸發perspectiveLeft的代碼，但在鼠標移出它沒有做perspectiveLeftRetourn。我犯了一個簡單的錯誤？

來源

2013-07-23 Andy Holmes

得到這個方便的js小提琴嗎？ – Novocaine

不幸的是，因爲它在本地託管和工作網站，所以我現在無法發佈代碼。有點糟糕 –

爲什麼你需要$（this）.find（'＃prev，＃nextxt'）'。不是'$（'＃prev，#next'）'夠了嗎？ – nubinub

這裏有一個fiddle

似乎很好地工作具有以下

$(document).ready(function() { 
    var els = $('#prev, #next'); 
    $('#banner-holder').on('mouseenter', function() { 
     els.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft'); 
    }); 
    $('#banner-holder').on('mouseleave', function() { 
     els.removeClass('perspectiveLeft').addClass('perspectiveLeftRetourn'); 
    }); 
});

編輯：您可能還需要刪除類perspectiveLeftRetourn當你mouseenter。

來源

2013-07-23 09:47:42 Novocaine

我試過這個，但它不適合我-.-我會調試我的代碼，給我15分鐘:) –

你有'prev'，'next'或'banner-holder'的重複ID嗎？那會造成問題。 – Novocaine

不僅每一個 –

$(document).ready(function(){ 
    $('#banner-holder').hover(function(){ 
     $('#prev, #next').addClass('magictime perspectiveLeft'); 
    },function(){ 
     $('#prev, #next').removeClass('perspectiveLeft'); 
     $('#prev, #next').addClass('perspectiveLeftRetourn'); 
    }); 
});

也許這會工作得更好。

來源

2013-07-23 09:48:39 nubinub

使用jQuery添加魔術CSS3動畫時無法正常工作

回答

相關問題