圖像fadein沒有與jquery閃爍

我試圖淡入圖像時，當我點擊一個鏈接，但這給了我一個「眨眼」每一個淡出。無論如何避免這種眨眼，只是有一個乾淨的淡入淡出？圖像fadein沒有與jquery閃爍

這是我當前的代碼：

function changeMortar(mortar) { 
    var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'      
     $("#fuge-color").hide().html(html).fadeIn('slow'); 
    }

我做這個例子 http://jsfiddle.net/BHCam/14/

它消失爲白色，然後進入砂漿我選擇。我想要的是讓我選擇的迫擊炮消失在舊迫擊炮上。

來源

2012-09-12 Morten Hagh

其工作正常我的克羅默瀏覽器，在哪個瀏覽器是你測試？ –

嗯..我在Google Chrome中測試 –

我已經做了一些改動你的代碼。嘗試像這樣的HTML：

<div id="slideshow"> 
    <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/> 
    <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" /> 

</div> 
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>

在CSS：

#slideshow { 
    position:relative; 
    height:350px; 
} 
#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
} 
#slideshow IMG.active { 
    z-index:10; 
} 
#slideshow IMG.last-active { 
    z-index:9; 
}

和JavaScript代碼：

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    var $next = $active.next().length ? $active.next() 
    : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
    }); 
    }

而且在here你可以找到更多信息。並且here是JsFiddle中的運行示例。

來源

2012-09-12 10:33:45

正是這樣！非常非常感謝你！ –

像這樣的閃爍和其他工件可能是由您的瀏覽器或顯卡驅動程序引起的，因此除了檢查圖形設置調整或升級機器組件之外，您可以做的事情不多。你的例子在這裏順利消失。

來源

2012-09-12 09:29:33

哦..我想我表達了自己的錯誤 - 對此感到遺憾。它褪色成白色，然後進入我選擇的砂漿。我想要的是讓我選擇的迫擊炮，褪色舊迫擊炮 –

只是將其更改爲

$("#fuge-color").hide().fadeIn('slow'); //use slow,fast,1000,2000,3000

選擇你的最好成績

來源

2012-09-12 09:41:31 Gautam3164

你能嘗試用animate：

function changeMortar(mortar) { 
var $html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'      
    $("#fuge-color").animate({ opacity: 0.8 }, 'fast', function(){ 
      $(this).html($html).animate({ opacity: 1 }, 'fast'); 
    }); 
}

來源

2012-09-12 09:47:21

它似乎並沒有完全做到這一點...... –

圖像fadein沒有與jquery閃爍

回答

相關問題