我创建了以下函数来为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);
};
答案 0 :(得分:0)
以下是我提出的解决方案:
$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');