0

<map>我使用定义了 15 个标签的标签创建了伦敦的交互式地图<area>。在点击 15 个区域中的任何一个后，地图的来源将根据点击的区域被另一个替换。所有区域都有一个单独的 ID，并且源根据该 ID 更改。

再次单击该区域会将地图图像恢复为其原始来源。

简化的 HTML 有点像这样：

<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london">
<map name="london">
<area id="dalston" href="#" shape="rect" coords="364,75,500,200"
      alt="Dalston Tube Stop" title="Dalston Area">
</map>

我用于单击和取消单击的 jQuery 如下所示：

$(document).ready(function()
{
    $('#dalston').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
 });

到这里为止的一切都很好。现在，我认为这会很好，只需一点额外的效果就可以.fadeToggle()在单击时更改图像以获得更平滑的过渡，因此将代码更改为：

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
     });
 });

现在的问题是只有一半的代码像我预期的那样做出反应——原始图像淡出，但第二个永远不会取代它的位置。我猜这与事件发生的顺序有关，但作为 jQuery 中的一个菜鸟，我真的无法判断出了什么问题。

任何帮助将不胜感激，因为这是阻止我完成地图的最后一件事！

4

3 回答 3

1

一旦使用该fadeToggle函数消失，您就永远不会真正显示元素。交换图像后，您需要将其显示回来。

更新

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeOut('slow', function() {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        $('#londonmap').fadeIn('slow');
        });
    });
});

或者在这里查看工作示例。

于 2012-05-23T14:28:38.210 回答
0

尝试：

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        //show the image
        $('#londonmap').fadeToggle('slow');
    });
     });
 });
于 2012-05-23T14:25:52.683 回答
0

你还没有告诉它反转切换，试试这个

$(document).ready(function() {

    $('#dalston').click(function() {

        $('#londonmap').fadeToggle('slow', function() {

            // select the image and determine what the next src will be
            var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

            // re-bind the src attribute and fade back in
            $(this).attr('src', newImageSrc).fadeToggle('slow');
        });
    });
});
于 2012-05-23T14:33:56.017 回答