1

根据相应数字的 onclick 功能，我有六个要淡入和淡出的图像。该函数由显示为数字 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 的策略是按类淡出所有图像，然后使用回调函数淡入所需的图像。

当我实现脚本时，图像确实发生了变化，但是在第一次淡出之后，新图像会迅速出现，然后再次淡入。

我想要的主要是能够在任何给定时刻单击任何跨度编号以淡出/淡入所需的新图像。

这个小故障是从哪里来的？谢谢..

4

3 回答 3

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/

于 2013-08-25T21:36:39.980 回答
0

这样的东西应该是你所需要的：

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

小提琴

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

于 2013-08-25T21:23:35.723 回答
0

我认为它不起作用的原因是 .hidden 类是持有 display:none; 的类。属性，基本上淡入淡出所做的就是将此值更改为阻塞。

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

尝试这个，

$('#prC1.hidden').fadeIn();

于 2013-08-25T21:54:27.543 回答