Jquery 在悬停状态下移动图像10px并更改不透明度
我有我下面的代码,它工作得很好,但我还想将图像向下移动10像素,然后再次在mouseout上移动,并将不透明度恢复到0.7Jquery 在悬停状态下移动图像10px并更改不透明度,jquery,Jquery,我有我下面的代码,它工作得很好,但我还想将图像向下移动10像素,然后再次在mouseout上移动,并将不透明度恢复到0.7 $('#drinksList section a img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { $(this).stop().animate({ op
$('#drinksList section a img').load(function() {
$(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
$(this).stop().animate({
opacity: 1,
height: $(this).data('height') * (e.type === 'mouseenter' ? 1.05 : 1)
});
});
任何帮助都将不胜感激 试试看
$('.image').each(function() {
var top = parseInt($(this).css('top'));
var height = $(this).height();
var width = $(this).width();
$(this).hover(function() {
$(this).stop().animate({
opacity: 1.0,
top: top + 10,
height: height + 10,
width: width + 10
}, 100);
}, function() {
$(this).stop().animate({
opacity: 0.7,
top: top,
height: height,
width: width
}, 100);
});
});
试试这个:
$('#drinksList section a img').hover(function() {
$(this).stop().animate({
opacity: 1.0,
top: '+=10' // move it down by 10px
}, 1000); // 1000 is the animation time in milliseconds
}, function() {
$(this).stop().animate({
opacity: 0.7,
top: '-= 10' // move it back up
}, 1000);
});
给你:
$('#drinksList section a img').load(function() {
$(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
var enter = e.type === 'mouseenter',
height = $(this).data('height');
$(this).stop().animate({
'margin-top': (enter ? 10 : 0),
opacity: (enter ? 1 : 0.7),
height: height * (enter ? 1.05 : 1)
});
});
实时演示:关闭:)谢谢你,但如果你一直悬停在它们上面(当你在一个屏幕上有很多东西时),它会不断调整它们的大小并将它们向后移动以你为例……你可以一直悬停直到它消失:)