Javascript 如何同时执行动画和淡出？_Javascript_Jquery_Html_Css

Javascript 如何同时执行动画和淡出？

javascript jquery html css

Javascript 如何同时执行动画和淡出？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想让“app1”移到左边，同时淡出这些功能正在逐一执行。我希望它同时发生。我不希望它向左移动然后消失谢谢 <!DOCTYPE html> <html> <head> <title>Forget Me Not</title> <style> body { background-color:#66d9ff; } #app1{ position:absolute; width:250px; height:250p

我想让“app1”移到左边，同时淡出

这些功能正在逐一执行。我希望它同时发生。我不希望它向左移动然后消失

谢谢

<!DOCTYPE html>

<html>

<head>

<title>Forget Me Not</title>

<style>

body
{
background-color:#66d9ff;
}

#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}

img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
    $(".appIMG1").click(function () {
        $("#app1").animate({
            left: '250px'
        });
    $("#app1").fadeOut();
    });
});
</script>

</head>

<body>
<!-- php stuff goes the body -->
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% >
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>


</body>

</html>


别忘了我
身体
{
背景色：#66d9ff；
}
#附件1{
位置：绝对位置；
宽度：250px；
高度：250px；
z指数：0；
最高：50%；
左：50%；
利润率：-150px 0-150px；
背景：白色；
盒影：0 0 1px 1px#8888888；
文本对齐：居中
}
img.appIMG1{
-网络工具包盒阴影：0 0 1px 1px#8888888；
盒影：0 0 1px 1px#8888888；
}
img.appIMG2{
-网络工具包盒阴影：0 0 1px 1px#8888888；
盒影：0 0 1px 1px#8888888；
}
$（文档）.ready（函数（）{
$（“.appIMG1”）。单击（函数（）{
$（“#app1”）。设置动画({
左：“250px”
});
$（“#app1”）.fadeOut（）；
});
});
你想提醒一下吗

您可以使用相同的

设置不透明度的动画。animate

调用

$("#app1").animate({
    left: "250px",
    opacity: 0
});

您可以使用相同的

设置不透明度的动画。animate

调用

$("#app1").animate({
    left: "250px",
    opacity: 0
});

只需同时设置其不透明度的动画

$("#app1").animate({
     left: '250px',
     opacity: 0.0
});

只需同时设置其不透明度的动画

$("#app1").animate({
     left: '250px',
     opacity: 0.0
});

最简单的代码修复方法是将

队列：false

添加到动画：

$(document).ready(function () {
    $(".appIMG1").click(function () {
        $("#app1").animate({
            left: '250px'
        },{queue:false}); // <-- here
    $("#app1").fadeOut();
    });
});

$（文档）.ready（函数（）{
$（“.appIMG1”）。单击（函数（）{
$（“#app1”）。设置动画({
左：“250px”
}，{queue:false}）；//最简单的代码修复方法是将queue:false
添加到动画中：
$(document).ready(function () {
    $(".appIMG1").click(function () {
        $("#app1").animate({
            left: '250px'
        },{queue:false}); // <-- here
    $("#app1").fadeOut();
    });
});

$（文档）.ready（函数（）{
$（“.appIMG1”）。单击（函数（）{
$（“#app1”）。设置动画({
左：“250px”
}，{queue:false}）；//零不透明度不会像fadeOut（）
那样将其从DOM流中删除，因为它设置了display:none
虽然它有position:absolute；
所以我想在这种情况下它不重要：）我有点糊涂……我想知道你对DOM流的更多意思，以及为什么position:absolute不重要？@ebady他说的是，如果它不是position:absolute
的话，div可能仍然会占用一大块垂直空间，因为它仍然存在，只是透明的。因为它是position:absolute
它不会中断其他元素的流，零不透明度不会像fadeOut（）
那样将其从DOM流中移除，因为它设置了display:none
虽然它有position:absolute；
所以我认为在这种情况下它不重要：）我有点糊涂……我想知道你对DOM流的更多意思，以及为什么position:absolute不重要？@ebady他说的是，如果它不是position:absolute
的话，div可能仍然会占用一大块垂直空间，因为它仍然存在，只是透明的。因为它是position:absolute
它不会中断其他元素的流动