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

I want "app1" to move to the left and fade out at the same time?

我希望“app1”向左移动并同时淡出？

The functions are performing them one by one. I want it to happen at the same time. I dont want it to move left and then fade out.

这些功能是逐个执行的。我希望它同时发生。我不希望它向左移动然后淡出。

THANKS!

谢谢！

<!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>

3 个解决方案

#1

Easiest fix for your code is to add queue:false to your animate:

最简单的代码修复方法是为您的动画添加queue：false：

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

Demo: http://jsfiddle.net/HFLur/

演示：http：//jsfiddle.net/HFLur/

#2

jsFiddle Demo

jsFiddle演示

Just animate its opacity at the same time

只需在同一时间为其不透明度制作动画

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

#3

You can animate the opacity with the same .animate call

您可以使用相同的.animate调用为不透明度设置动画

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

#1