wordpress插件上的jQuery悬停放大答案

【问题标题】：jQuery hover enlarge on wordpress pluginwordpress插件上的jQuery悬停放大
【发布时间】：2012-08-22 04:53:17
【问题描述】：

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

    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/)

【问题讨论】：

您是否在 Web 应用程序上看到过您的这个问题：webapps.stackexchange.com/q/54645/29140？为什么不创建一个帐户？

标签： jquery wordpress

【解决方案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 中指定的宽度和高度（由您或制作它们的插件）。

【讨论】：

【解决方案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

希望对您有所帮助。

【讨论】：