Question

根据相应数字的onclick功能，我有6张想要淡入淡出的图像。该功能由跨度显示，显示为数字1到6。

html：

<img id="prC1" class="swpr" src="Img/SW_prC1.jpg" height=360px width=520px >
<img id="prC2" class="swpr hidden" src="Img/SW_prC2.jpg" height=360px width=520px >    
<img id="prC3" class="swpr hidden" src="Img/SW_prC3.jpg" height=360px width=520px >    
<img id="prC4" class="swpr hidden" src="Img/SW_prC4.jpg" height=360px width=520px >    
<img id="prC5" class="swpr hidden" src="Img/SW_prC5.jpg" height=360px width=520px >    
<img id="prC6" class="swpr hidden" src="Img/SW_prC6.jpg" height=360px width=520px >   

<span id="loadswimage1">1</span>
<span id="loadswimage2">2</span>
<span id="loadswimage3">3</span>
<span id="loadswimage4">4</span>
<span id="loadswimage5">5</span>
<span id="loadswimage6">6</span>

css：

.hidden {
display:none; }

脚本：

$(function(){
$('#loadswimage1').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC1').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage2').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC2').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage3').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC3').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage4').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC4').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage5').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC5').fadeIn('slow'); });  })  });

$(function(){
$('#loadswimage6').click(function(){
    $('.swpr').fadeOut('slow', function() {
    $('#prC6').fadeIn('slow'); });  })  });

正如您所看到的，我对jquery的策略是逐个淡出所有图像，然后使用回调函数淡入所需的图像。

当我实现脚本时，图像会发生变化，但在第一次淡出后，新图像会快速显示，然后再次淡入。

我想要的主要是能够在任何给定时刻点击任何跨度数来淡出/进入所需的新图像。

这个小故障来自哪里？谢谢..

Answer 1

虽然adeneo的解决方案也是正确的，但我会采用这种方法，因为它独立于元素DOM位置。

<强> HTML：

<div class="swpr">
    <img id="prC1" src="Img/SW_prC1.jpg" height="360" width="520" alt="1" />
    <img id="prC2" src="Img/SW_prC2.jpg" height="360" width="520" alt="2" />    
    <img id="prC3" src="Img/SW_prC3.jpg" height="360" width="520" alt="3" />    
    <img id="prC4" src="Img/SW_prC4.jpg" height="360" width="520" alt="4" />    
    <img id="prC5" src="Img/SW_prC5.jpg" height="360" width="520" alt="5" />    
    <img id="prC6" src="Img/SW_prC6.jpg" height="360" width="520" alt="6" />   
</div>

<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<span data-id="4">4</span>
<span data-id="5">5</span>
<span data-id="6">6</span>

<强> CSS：

.swpr img+img{ display:none; }

JS：

$('span').click(function(){
    $('.swpr img').not(
        $('#prC'+$(this).data('id')).stop(true,true).fadeIn()
    ).stop(true,true).fadeOut();
});

<强>演示：

http://jsfiddle.net/EfA9w/

Answer 2

这样的事情应该是你所需要的：

$(function(){
    $('[id^="loadswimage"]').on('click', function(){
        var idx  = $(this).index('[id^="loadswimage"]'),
            curr = $('.swpr:visible');

        if ( curr.index() !== idx ) {
            curr.fadeOut('slow', function() {
                $('.swpr').eq(idx).fadeIn('slow');
            });
        }
    });
});

FIDDLE

这使用跨度索引在具有相同索引的图像中淡入淡出，另一种解决方案是使用类或数据属性。

Answer 3

我认为它不起作用的原因是因为.hidden类是持有display：none;属性和fadein所做的基本上就是将这个值改为阻塞。

看起来您的代码正在尝试更改元素的显示属性。隐藏的类仍然强制或覆盖理性属性，没有。

试试这个，

$（ '＃prC1.hidden'）淡入（）;

通过单击相应的跨度淡出/缩小图像

3 个答案: