Question

我有一个名为Videogall的Wordpress插件，可以为Youtube视频创建一个缩略图库，点击时可以在Shadowbox中打开。当您将鼠标悬停在图库中的缩略图上时，以下代码会导致所有缩略图而不是悬停在其上变得更加透明。

    jQuery('.videogall-thumb').hover(function() {
    var currThumb = jQuery(this).attr('id');
    jQuery('.videogall-thumb[id!="' + currThumb +'"]').stop().animate({opacity: 0.3}, 800);
}, function() {
    jQuery('.videogall-thumb').stop().animate({opacity: 1.0}, 800);
}
);

我可以添加什么来使图像悬停在上面？la hoverpulse（http://jquery.malsup.com/hoverpulse/）

Answer 1

或许这样的事情？

    jQuery('.videogall-thumb').hover(function() {
    var currThumb = jQuery(this).attr('id');
    jQuery('.videogall-thumb[id!="' + currThumb +'"]').stop().animate({opacity: 0.3}, 800);

    //added lines
    jQuery(this).css('width', jQuery(this).css('width') * 1.5);
    jQuery(this).css('height', jQuery(this).css('height') * 1.5);

}, function() {
    jQuery('.videogall-thumb').stop().animate({opacity: 1.0}, 800);
}
);

这假设缩略图的宽度和高度在CSS中指定（由您或制作它们的插件）。

Answer 2

这行代码匹配未悬停的缩略图ID：

jQuery('.videogall-thumb[id!="' + currThumb +'"]').stop().animate({opacity: 0.3}, 800);

应该改为

jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({opacity: 0.3}, 800);

id=currThumb instead of id!=currThumb

希望有所帮助。

jQuery hover放大wordpress插件

2 个答案: