2014-04-06 2 views
0

У меня есть простой слайд-шоу jquery на моем сайте, который использует fadeIn и fadeOut. FadeIn/Out создает вспышку моего фона, которая вызывает раздражение. Я попытался заменить другие переходы, но не повезло.Jquery слайд-шоу с fadeOut - без fadeIn

Моя цель состоит в том, чтобы изображения полностью исчезали друг в друге, без темных изображений, показывающих вспышку моего фона во время перехода.

Мой JQuery:

$(function(){ 
$('.fadein img:gt(0)').hide(); 
setInterval(function(){ 
    $('.fadein :first-child').fadeOut() 
    .next('img').fadeIn() 
    .end().appendTo('.fadein');}, 
    3000); 
}); 
+0

скрипка или codepen пример, возможно, сделает его более легким для госзакупок, чтобы увидеть проблему и помогите вам. – mbrrw

ответ

0

У меня была аналогичная проблема, когда-то давно. Если вы не предоставите скрипку, вам сложно привести пример точного кода, который вам нужен. В основном это понятие, вам нужно начать, чтобы показать следующее изображение как вы затухать текущее изображение

DEMO http://jsfiddle.net/nyXUt/161/

var speed = 2000; 
run = setInterval("switchSlide()", speed); 
$(document).ready(function() { 

    $('#caption').html($('#slideshow img:first').attr('title')); 

    $('#slideshow img:gt(0)').hide(); 

    $('#previous').click(function() { 
     $('#slideshow img:first').fadeOut(1000); 
     $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow'); 
     $('#caption').html($('#slideshow img:first').attr('title')); 
    }); 

    $('#next').click(function() { 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); 
     $('#caption').html($('#slideshow img:first').attr('title')); 
    }); 

}); 

function switchSlide() { 
    $('#slideshow img:first').fadeOut(1000).next().show().end().appendTo('#slideshow'); 
    $('#caption').html($('#slideshow img:first').attr('title')); 
} 
+0

Большое спасибо. Любил котята кстати. – user3504428