Javascript jquery动画在多个元素中的缺陷
演示 显然,动画的非异步导致它们不能同时被触发,但我不知道为什么当mouseleave在最下面一行出现重叠问题。我尝试了css与过渡,现在与动画仍然不能完善的动画 部分守则Javascript jquery动画在多个元素中的缺陷,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,演示 显然,动画的非异步导致它们不能同时被触发,但我不知道为什么当mouseleave在最下面一行出现重叠问题。我尝试了css与过渡,现在与动画仍然不能完善的动画 部分守则 $('.hoverExpand').mouseenter(function () { var $this = $(this); var getIndexOfTarget = $this.closest('.product-panel').index(); if(getIndexOfTarget % 2 =
$('.hoverExpand').mouseenter(function () {
var $this = $(this);
var getIndexOfTarget = $this.closest('.product-panel').index();
if(getIndexOfTarget % 2 == 0){ //check target if is even
$('.product-panel').filter(function(i) {
return i > 2 && i % 2 == 1
}).animate({'margin-top':"-=100px",
"transition":"all 0.2s linear"
});
}else{
$('.product-panel').filter(function(i) {
return i > 1 && i % 2 == 0;
}).animate({'margin-top':"-=100px",
"transition":"all 0.2s linear"
});
}
if (!$this.hasClass('on')) {
$this.addClass('on');
$this.find('.productsThumbWrap').stop(true, true).animate({
"margin-top": "200px"
}, "fast",function(){
});
$this.find('.productsThumbWrap img').stop(true, true).css({
opacity: 1,
'transition': 'opacity 0.45s ease 0.15s'
});
}
});
我不知道为什么要混合使用jquery和css转换。我会选择其中一个。 如果您的结构类似于: 下面是一个仅使用CSS和简化HTML结构的简单示例: 如果你想使用jquery动画,你可以这样做
$('.product').hover(
function(){ $(this).child('.product-lower').slideDown();},
function(){ $(this).child('.product-lower').slideUp();});
我根本没有测试这段代码,但也许你明白了
希望这有帮助 过渡属性不可设置动画。在CSS中设置它,或者在链中的某个位置使用.CSS{transition:all 0.2s linear}。