jQuery:无法为元素动画转换 css

Question

我创建了以下函数来为 div 设置动画，使其稍微向左移动然后向右移动:

var jiggle_pull_chain = function(){

    var $pull_chain = jQuery("#pull-chain");

    $pull_chain.animate({
                    '-webkit-transform': 'rotate(3deg)',
                    '-ms-transform': 'rotate(3deg)',
                    'transform': 'rotate(3deg)',
                    'zoom': 1
        }, 5000);

    $pull_chain.animate({
                    '-webkit-transform': 'rotate(-3deg)',
                    '-ms-transform': 'rotate(-3deg)',
                    'transform': 'rotate(-3deg)',
                    'zoom': 1
        }, 5000);


};

由于某种原因，CSS 属性没有添加到元素中，也没有收到 javascript 错误。有人知道我这样做是否正确吗？

Here是使用代码的测试页面(靠近页面底部)。

完整代码如下:

jQuery(document).ready(function($){
//Clicking on employee name 
$(".employee-names a").on("click", function(){
    var $this = $(this);
    //Find the employee id
    var employee_id = $this.data('employee-id');

    //Hide all employee images
    hide_employee_imgs();

    //Loop through all employees and reveal their first image matching this id
    $(".employee").each(function(){
        var img_employee_id = $(this).data('employee-id');
        if ( img_employee_id == employee_id ) {
            $(this).find('img:first-child').fadeIn('fast');
            return false;
        }
    });
});

//pull-chain for the team section
$("#pull-chain .handle").on("click", function(){
    var $this = $(this);
    var $pull_chain = $this.prev();

    if ( $this.hasClass('pulled') ) {
        $pull_chain.animate({ height: 150}, 600);
        $this.removeClass('pulled');
        switch_employee_img();
    }
    else{
        $this.addClass('pulled');
        $pull_chain.animate({ height: 230}, 600);
        switch_employee_img();
    }
});

});

var hide_employee_imgs = function(){
jQuery(".employee img").hide();
};

var switch_employee_img = function(){
jQuery(".employee img").each(function(){
    $this = jQuery(this);
    if ( $this.is(":visible") ) {
        $this.hide();
        $this.siblings().fadeIn('slow');
        return false;
    }
}); 

jiggle_pull_chain();
};

var jiggle_pull_chain = function(){

var $pull_chain = jQuery("#pull-chain");

$pull_chain.animate({
                '-webkit-transform': 'rotate(3deg)',
                '-ms-transform': 'rotate(3deg)',
                'transform': 'rotate(3deg)',
                'zoom': 1
    }, 5000);

$pull_chain.animate({
                '-webkit-transform': 'rotate(-3deg)',
                '-ms-transform': 'rotate(-3deg)',
                'transform': 'rotate(-3deg)',
                'zoom': 1
    }, 5000);


};

Answer 1

这是我想出的解决方案:

$pull_chain.animate({  textIndent: 0 }, {
    step: function(now,fx) {
      jQuery(this).css('-webkit-transform','rotate(-3deg)'); 
      jQuery(this).css('-ms-transform','rotate(-3deg)'); 
      jQuery(this).css('transform','rotate(-3deg)'); 
    },
    duration:'slow'
},'linear');

$pull_chain.animate({  textIndent: 0 }, {
    step: function(now,fx) {
      jQuery(this).css('-webkit-transform','rotate(3deg)'); 
      jQuery(this).css('-ms-transform','rotate(3deg)'); 
      jQuery(this).css('transform','rotate(3deg)'); 
    },
    duration:'slow'
},'linear');