0

我试图有一个带有两个选项的框，我希望它在单击选项 1 时向左设置动画和淡出，并在我选择选项二时向右侧设置动画和淡出。不幸的是，它只向左和向上动画，而不是我想要的向右。（也不会为底部设置动画）。我能做些什么来解决这个问题。

$(document).ready(function () {
$(".appIMG2").one('click.appIMG2', function() {
    $('.appIMG1, .appIMG2').unbind('click');
    $('#app1').animate({
        right: "250px",
        opacity:0
    });
    $("#app3").fadeIn("slow");
    });
});

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

我假设这与我如何声明 #app1,2 和 3 的边距有关，但我无法弄清楚。

http://jsfiddle.net/7tgJC/

4

1 回答 1

0

Firstly to say you're better off showing your HTML as well - in a Fiddle preferably.

I do believe you're seeing is the intended and default behaviour of Fade-in/Animate. If you want it to FadeIn/Animate in different directions, you could to utilise jQuery Slide with the direction parameter with the jQuery UI library.

<script>
$('#examplediv').hide("slide", { direction: "right" }, function() {
   //Some Code.
});
</script>

But indeed you're better off removing those margins, see this Fiddle without the margins: http://jsfiddle.net/SMrcy/4/ with it animating right.

于 2013-05-22T09:01:51.303 回答