Question

我一直在创建一个小页面来创建各种各样的交互式地图。当前网站不代表最终产品，只是获取网站的内容和编码设置。我对网络编码也很新，只是fyi。

这是我的问题。

我正在尝试使用基于点击按钮的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);
});

Answer 1

你有很多重复的内联样式，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);
    });
});

使用Jquery进行淡化/淡出。淡出似乎没有正常工作

1 个答案: