Question

我使用<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中有点像菜鸟，我无法确定出现了什么问题。

任何帮助都会非常感激，因为这是阻止我完成地图的最后一件事！

Answer 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');
        });
    });
});

或者阅读工作示例here。

Answer 2

尝试：

$(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');
    });
     });
 });

Answer 3

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

$(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');
        });
    });
});

单击带有fadeToggle（）的事件 - 我的代码出了什么问题？

3 个答案: