使用 .attr() 在 mouseenter 上打开 Shadowbox答案

【问题标题】：Opening Shadowboxes on mouseenter using .attr()使用 .attr() 在 mouseenter 上打开 Shadowbox
【发布时间】：2013-07-23 01:17:14
【问题描述】：

我希望能够将鼠标悬停在阴影框上以将其打开，并且我已经搜索了一段时间，但我仍然不完全理解如何做到这一点的概念。这是我的 HTML：

<table id="tapaintings">
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/t_painting1.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/t_painting2.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/t_painting3.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/t_painting4.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="shadowbox[paintings]" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/t_painting5.jpg" alt="painting"></a></td>
                <td><a id="shadowbox[paintings]" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/t_painting6.jpg" alt="painting"></a></td>
            </tr>
        </table>

到目前为止我的 jquery：

$(document).ready(function() {
    $("img").mouseenter(function() {
        $(this).attr("src", "images/painting1.jpg");
    });
});

我目前正试图放大第一张图片，但我希望能够将鼠标悬停在任何缩略图上并能够打开我的影子框。我还希望能够连续循环浏览照片，以便我可以关闭我正在使用 mouseleave 的影子框。我是 jQuery 的初学者，所以我一直无法掌握这个概念，所以任何帮助都将不胜感激。

【问题讨论】：

它是一个jquery插件吗？？

标签： jquery mouseenter mouseleave shadowbox

【解决方案1】：

我认为您缺少 jQuery 对象声明前面的 $。还要确保你的文件上有扩展名（.jsp；.png；等）。试试这个（我还没有验证）：

$(document).ready(function(){
    $("img").mouseenter(function() {
        $(this).attr("src", images/painting1.jsp);
    });
});

【讨论】：

好的，我在末尾添加了现金符号和 .jpg，但我的影子盒仍然无法打开。我也只是暂时使用这个源，直到我可以让 mouseenter 函数工作。

【解决方案2】：

你的意思是这样吗？

$(function(){
    $('#tapaintings a').mouseenter(function(){
        var id = $(this).attr('id');
        $('a#' + id + ' img').animate({
            'height' : '80px',
            'width'  : '80px'
        });
    });
.........

见this fiddle

【讨论】：

我想你大概有这个想法，但是当我尝试实现这段代码时它不起作用。是否可以根据我已有的尺寸为照片设置动画，而不是选择高度和宽度？我需要做的最后一件事是为右侧的照片设置动画，而不是在缩略图上方放大。