Javascript jQuery中的交叉淡入淡出图像

我在网页上有一个图像，并在移动jQuery滑块时对其进行更改：

HTML:

滑块HTML：

<div id="slider1">

脚本：

<script>
  $(function() {
    $( "#slider1" ).slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui){
        if(ui.value == 1){
            $('#flask').fadeOut(100);
            $('#flask').attr('src','images/flask_image2.png');
            $('#flask').fadeIn(100);
        }else{
            $('#flask').attr('src','images/flask_image1.png');
        };
    }
    });
  });
</script>

$（函数（）{
$（“#滑块1”）.滑块({
分:0,，
最高：4，
步骤：1，
更改：功能（事件、用户界面）{
如果（ui.value==1）{
$（'烧瓶'）。淡出（100）；
$（'#flask'）.attr（'src'，'images/flask_image2.png'）；
$（'烧瓶'）.fadeIn（100）；
}否则{
$（'#flask'）.attr（'src'，'images/flask_image1.png'）；
};
}
});
});

然而，这样做是图像淡出，改变，然后淡出，在其中“工作”，但它瞬间淡出为零

---

有没有一种方法可以使这两幅图像交叉淡入淡出？

我想这很简单，与实现一些插件相比，代码和难度要少得多：

HTML

<img src="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png" id="slider">
<button>Change Image</button>

改变形象

jQuery

var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
    if(!stopWorking){
        stopWorking=true;
    $('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
    $('#fadingImg').css({
        'position':'absolute',
        'width':'400px',
        'height':'400px',
        'top':'0px',
        'left':'0px'
    });
        if($('#slider').attr('src')==firstSrc){
            $('#slider').attr('src',secondSrc);
        } 
        else{
            $('#slider').attr('src',firstSrc);
        }
    $('#fadingImg').fadeOut(1000,function(){
        $('#fadingImg').remove();
        stopWorking=false;
    });
    }
});

var stopWorking=false；
var firstSrc=”http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc=”http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$（“按钮”）。单击（函数（）{
如果（！停止工作）{
停止工作=正确；
$（'body'）。追加（''）；
$（'#fadingImg'）.css({
'位置'：'绝对'，
“宽度”：“400px”，
“高度”：“400px”，
“顶部”：“0px”，
“左”：“0px”
});
if（$（'#slider'）.attr（'src'）==firstSrc）{
$（'#slider'）.attr（'src'，secondSrc）；
} 
否则{
$（'#slider'）.attr（'src'，firstSrc）；
}
$（'#fadingImg'）.fadeOut（1000，function（）{
$（'#fadingImg'）。删除（）；
停止工作=错误；
});
}
});

注意：

---

为了使其在页面中正常工作，您需要将滑块img的样式设置在滑块img的正上方。

是否可以简单地将第二个图像放在第一个图像的后面，并操纵顶部图像的不透明度？这就是你想要的吗？我不认为这在这种情况下会起作用，因为在透明的背景下，as项下有一个“阴影”…我只能试试！。。。不，使用当前的代码设置，您一次只能有一个图像，因为您只有一个图像元素。基于@JosephDailey建议的解决方案适合您的需求。TBH您正在尝试在某种程度上重新发明车轮。您肯定不是第一个想要并发明此功能的人，也许最好实现其他许多解决方案之一。

var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
    if(!stopWorking){
        stopWorking=true;
    $('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
    $('#fadingImg').css({
        'position':'absolute',
        'width':'400px',
        'height':'400px',
        'top':'0px',
        'left':'0px'
    });
        if($('#slider').attr('src')==firstSrc){
            $('#slider').attr('src',secondSrc);
        } 
        else{
            $('#slider').attr('src',firstSrc);
        }
    $('#fadingImg').fadeOut(1000,function(){
        $('#fadingImg').remove();
        stopWorking=false;
    });
    }
});