0

我一直在制作一个小页面来创建各种交互式地图。当前站点不代表最终产品，只是获取站点的内容和编码设置。一般来说，我对网络编码也很陌生，仅供参考。

这是我的问题。

我正在尝试基于单击按钮使用 jquery 使一系列图像淡入和淡出。按下按钮时，淡入/淡出似乎完美无缺，但在相反方向进行时，淡出似乎是立即的，尽管淡入正常工作。无论按钮单击的方向是哪个方向，我都希望淡入/淡出是统一的，但似乎无法找到编码以这种方式工作的原因。

这是我所有源代码的实时链接：http: //users.humboldt.edu/eibenm/sheepallenge.html

我猜问题出在以下部分：

$(document).ready(function() {
    $('#Image1').fadeIn(1500);
})      

$(button1).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image1').fadeIn(1500);
}); 

$(button2).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image2').fadeIn(1500);
}); 

$(button3).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image3').fadeIn(1500);
}); 

$(button4).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image4').fadeIn(1500);
}); 

$(button5).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image5').fadeIn(1500);
}); 

$(button6).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image6').fadeIn(1500);
}); 

$(button7).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image7').fadeIn(1500);
});
4

1 回答 1

0

你有很多重复的内联样式、JQuery 和 HTML 代码。它可以压缩成更小的形式。

// 为所有图像链接分配一个类

.links
{
    width : 130px;
    height : 49px;
    opacity: 0.5;
}

<img src="Images/1Lust.png" class="links" id="button1">

//  Assign a class to all the images as a Whole
.images
{
    width : 880px;
    height : 600px;
    display: none;
}
<img src="Images/Deadly Sin 1.jpg" class="images">

JavaScript // 此块将导致按钮不透明

$(document).ready(function() {
    $('a img').animate({
        opacity: .5
    });
    // will change opacity to 1 on hover and back to .5 when not 
    $('a img').hover(function() {
        $(this).stop().animate({
            opacity: 1
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            opacity: .5
        }, 'fast');

    });

    $('#Image1').fadeIn(1500); 

    // Assign the click event to All the id's that start with button
    $('[id^="button"]').on('click', function() {
        //  fade Out All the images inside sins
        $('#sins img').fadeOut('slow');
        // Find the index of the element that was clicked
        var $index = $('#links').find(this).index();
        // Show the corresponding image
        $('#sins img:eq('+ ($index + 1) + ')').fadeIn(1500);
    });
});
于 2012-10-30T23:04:24.750 回答